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

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

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

Давайте проанализируем следующий кусочек кода дочернего компонета 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>updating ...</p>}

А также снять обертку с функции setFilterTerm, то мы получим тот же результат, что и на прошлом уроке:

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