Hook optymalizacji wydajności useDeferredValue w React

Hook optymalizacji wydajności useDeferredValue, podobnie jak useTransition, pomaga przyspieszyć działanie interfejsu użytkownika, ale robi to nieco inaczej.

Spójrz na poprzednią lekcję i zobacz, jak w przypadku useTransition opakowywaliśmy funkcję aktualizującą setFilterTerm. Otóż, kod aktualizujący stan nie zawsze może być dostępny. Może być ukryty, na przykład w bibliotece, którą podłączyłeś. W tym przypadku możemy skorzystać z hooka useDeferredValue. Wtedy musimy opakować albo sam stan, albo wynik obliczany za pomocą tego stanu, tym samym obniżając jego priorytet.

Przeanalizujmy następujący fragment kodu komponentu potomnego ProductList:

ProductList.jsximport {useDeferredValue} from 'react'

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

Zwróć uwagę, że tutaj opakowaliśmy w useDeferredValue samą zmienną products, którą wzięliśmy z propsów komponentu. Następnie zapisaliśmy wynik w deferredProducts, z którą będziemy dalej pracować:

ProductList.jsxconst deferredProducts = useDeferredValue(products);

Teraz, jeśli we fragmencie kodu głównego komponentu, który rozważaliśmy w poprzedniej lekcji, usuniemy linijkę:

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

Oraz linijkę z użyciem isPending:

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

A także zdjąć opakowanie z funkcji setFilterTerm, to otrzymamy ten sam wynik, co w poprzedniej lekcji:

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