Hook optimalizace výkonu useDeferredValue v Reactu

Hook optimalizace výkonu useDeferredValue, stejně jako useTransition, pomáhá zrychlit práci grafického rozhraní, ale dělá to trochu jinak.

Podívejte se na předchozí lekci a podívejte se, jak jsme v případě useTransition obalovali funkci aktualizace setFilterTerm. Takže, kód aktualizace stavu nemusí být vždy k dispozici. Může být skrytý, například v knihovně, kterou jste připojili. V tomto případě můžeme použít hook useDeferredValue. Potřebujeme obalit buď samotný stav, nebo výsledek, vypočítaný pomocí tohoto stavu, čímž snížíme jeho prioritu.

Pojďme analyzovat následující kousek kódu podřízené komponenty ProductList:

ProductList.jsximport {useDeferredValue} from 'react'

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

Všimněte si, že zde jsme obalili v useDeferredValue samotnou proměnnou products, kterou jsme vzali z props komponenty. Poté jsme zapsali výsledek do deferredProducts, s kterou budeme dále pracovat:

ProductList.jsxconst deferredProducts = useDeferredValue(products);

Nyní, pokud v kousku kódu hlavní komponenty, kterou jsme zvažovali v předchozí lekci, odstraníme řádek:

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

A řádek s použitím isPending:

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

A také odstranit obal z funkce setFilterTerm, dostaneme stejný výsledek jako v předchozí lekci:

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