A useDeferredValue teljesítményoptimalizáló hook a React-ban

A useDeferredValue teljesítményoptimalizáló hook, éppúgy mint a useTransition, segít felgyorsítani a felhasználói felület működését, de ezt egy kicsit másképp teszi.

Vessen egy pillantást az előző leckére és nézze meg, hogy a useTransition esetében hogyan csomagoltuk be a setFilterTerm frissítő függvényt. Nos, az állapotfrissítő kód nem mindig lehet elérhető. Elrejtve lehet például egy olyan könyvtárban, amelyet csatlakoztatott. Ebben az esetben használhatjuk a useDeferredValue hookot. Ekkor magát az állapotot, vagy az azzal kiszámolt eredményt kell becsomagolnunk, ezzel csökkentve annak prioritását.

Elemezzük a következő kódrészletet a ProductList gyermek komponensből:

ProductList.jsximport {useDeferredValue} from 'react'

function ProductList({ products }) {
  const deferredProducts = useDeferredValue(products);
  
  return (
    <ul>
      {deferredProducts.map((product) => (
        <li>{product}</li>
      ))}
    </ul>
  );
}

Figyeljük meg, hogy itt magát a products változót csomagoltuk be a useDeferredValue-ba, amelyet a komponens props-ából vettünk. Az eredményt eltároltuk a deferredProducts-ban, amellyel ezután dolgozni fogunk:

ProductList.jsxconst deferredProducts = useDeferredValue(products);

Most, ha a fő komponens azon kódrészletében, amelyet az előző leckén vizsgáltunk, eltávolítjuk a következő sort:

App.jsxconst [isPending, startTransition] = useTransition();

És a isPending használatával kapcsolatos sort:

App.jsx{isPending && <p>updating ...</p>}

Valamint eltávolítjuk a setFilterTerm függvény körüli csomagolást, akkor ugyanazt az eredményt kapjuk, mint az előző leckén:

App.jsxfunction updateFilterHandler(event) {
  setFilterTerm(event.target.value);
}