Хук за оптимизация на производителността useDeferredValue в React

Хукът за оптимизация на производителността useDeferredValue, също като useTransition, помага за ускоряване на работата на графичния интерфейс, но го прави по малко по-различен начин.

Погледнете предишния урок и вижте как в случая с useTransition обвивахме функцията за актуализация setFilterTerm. Е, кодът за актуализация на състоянието не винаги може да бъде достъпен. Той може да бъде скрит, например, в библиотека, която сте включили. В този случай можем да използваме хука useDeferredValue. Тогава трябва да обвием либо самото състояние, либо резултата, изчислен с помощта на това състояние, като по този начин намалим неговия приоритет.

Нека анализираме следния код на детския компонент ProductList:

ProductList.jsximport {useDeferredValue} from 'react'

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

Обърнете внимание, че тук обвихме в useDeferredValue самата променлива products, която взехме от пропсите на компонента. След това записахме резултата в deferredProducts, с която ще работим по-нататък:

ProductList.jsxconst deferredProducts = useDeferredValue(products);

Сега, ако в частта от кода на главния компонент, която разгледахме в предишния урок, премахнем реда:

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

И реда с използването на isPending:

App.jsx{isPending && <p>актуализиране ...</p>}

А също и премахнем обвивката от функцията setFilterTerm, ще получим същия резултат като в предишния урок:

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