Hook-ul de optimizare a performanței useDeferredValue în React

Hook-ul de optimizare a performanței useDeferredValue, la fel ca și useTransition, ajută la accelerarea lucrului interfeței grafice, dar o face puțin diferit.

Aruncați o privire la lecția anterioară și vedeți cum în cazul useTransition am împachetat funcția de actualizare setFilterTerm. Ei bine, codul de actualizare a stării poate să nu fie întotdeauna disponibil. Acesta poate fi ascuns, de exemplu, într-o bibliotecă pe care ați conectat-o. În acest caz, putem folosi hook-ul useDeferredValue. Atunci avem nevoie să împachetăm fie starea în sine, fie rezultatul, calculat cu ajutorul acestei stări, reducând astfel prioritatea sa.

Să analizăm următoarea bucată de cod a componentei copil ProductList:

ProductList.jsximport {useDeferredValue} from 'react'

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

Observați că aici am împachetat în useDeferredValue variabila în sine products, pe care am luat-o din proprietățile componentei. Apoi am scris rezultatul în deferredProducts, cu care vom lucra în continuare:

ProductList.jsxconst deferredProducts = useDeferredValue(products);

Acum, dacă în bucata de cod a componentei principale, pe care am analizat-o în lecția anterioară, eliminăm linia:

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

Și linia cu utilizarea isPending:

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

Și, de asemenea, să îndepărtăm împachetarea de pe funcția setFilterTerm, atunci vom obține același rezultat ca în lecția anterioară:

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