Huku i Optimizimit të Performancës useDeferredValue në React

Huku i optimizimit të performancës useDeferredValue, njëlloj si useTransition, ndihmon për të përshpejtuar punën e ndërfaqes grafike, por e bën këtë pak më ndryshe.

Hidhni një sy mësimit të kaluar mësimit dhe shikoni se si në rastin me useTransition ne e mbështjellim funksionin e përditësimit setFilterTerm. E pra, kodi i përditësimit të state-it nuk mund të jetë gjithmonë i disponueshëm. Ai mund të jetë i fshehur, për shembull, në një bibliotekë, që keni lidhur. Në këtë rast ne mund të përdorim hukun useDeferredValue. Atëherë na duhet të mbështjellim ose state-in vetë, ose rezultatin, që llogaritet me ndihmën e këtij state-i, duke ulur kështu prioritetin e tij.

Le të analizojmë fragmentin e mëposhtëm të kodit të komponentit të fëmijës ProductList:

ProductList.jsximport {useDeferredValue} from 'react'

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

Vini re se këtu kemi mbështjellë në useDeferredValue vetë variablin products, të cilin e kemi marrë nga propet e komponentit. Pastaj kemi shkruar rezultatin në deferredProducts, me të cilin do të punojmë më tej:

ProductList.jsxconst deferredProducts = useDeferredValue(products);

Tani, nëse në fragmentin e kodit të komponentit kryesor, të cilin e kemi shqyrtuar në mësimin e kaluar, heqim rreshtin:

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

Dhe rreshtin me përdorimin e isPending:

App.jsx{isPending && <p>duke u përditësuar ...</p>}

Dhe gjithashtu të heqim mbështjelljen nga funksioni setFilterTerm, atëherë do të marrim të njëjtin rezultat si në mësimin e kaluar:

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