Hook optimalizácie výkonu useDeferredValue v Reacte

Hook optimalizácie výkonu useDeferredValue, podobne ako useTransition, pomáha zrýchliť prácu grafického rozhrania, ale robí to trochu inak.

Pozrite si predchádzajúcu lekciu a pozrite sa, ako v prípade useTransition sme obalili funkciu aktualizácie setFilterTerm. Kód aktualizácie stavu nemusí byť vždy dostupný. Môže byť skrytý, napríklad v knižnici, ktorú ste pripojili. V tomto prípade môžeme použiť hook useDeferredValue. Potom musíme obaliť buď samotný stav, alebo výsledok, vypočítaný pomocou tohto stavu, čím sa zníži jeho priorita.

Analyzujme nasledujúci kúsok kódu podradenej komponenty ProductList:

ProductList.jsximport {useDeferredValue} from 'react'

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

Všimnite si, že tu sme obalili v useDeferredValue samotnú premennú products, ktorú sme vzali z props komponentu. Potom sme zapísali výsledok do deferredProducts, s ktorou budeme ďalej pracovať:

ProductList.jsxconst deferredProducts = useDeferredValue(products);

Teraz, ak v kúsku kódu hlavného komponentu, ktorý sme skúmali v predchádzajúcej lekcii, odstránime riadok:

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

A riadok s použitím isPending:

App.jsx{isPending && <p>aktualizácia ...</p>}

A tiež odstrániť obal z funkcie setFilterTerm, dostaneme ten istý výsledok ako v predchádzajúcej lekcii:

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