Хук оптимизации производительности useDeferredValue в React
Хук оптимизации производительности
useDeferredValue, также как и
useTransition, помогает ускорить
работу графического интерфейса, но делает
это немного по-другому.
Взгляните на прошлый
урок
и посмотрите, как в случае с useTransition
мы оборачивали функцию обновления
setFilterTerm. Так вот, код обновления
стейта не всегда может быть доступен. Он
может быть скрыт, например, в библиотеке,
которую вы подключили. В этом случае мы
можем воспользоваться хуком
useDeferredValue. Тогда нам нужно
обернуть либо сам стейт, либо результат,
вычисляемый с помощью этого стейта, тем
самым снизив его приоритет.
Давайте проанализируем следующий кусочек
кода дочернего компонета ProductList:
import {useDeferredValue} from 'react'
function ProductList({ products }) {
const deferredProducts = useDeferredValue(products);
return (
<ul>
{deferredProducts.map((product) => (
<li>{product}</li>
))}
</ul>
);
}
Обратите внимание, что здесь мы обернули
в useDeferredValue саму переменную
products, которую мы взяли из
пропсов компонента. Затем мы записали
результат в deferredProducts,
с которой и будем работать далее:
const deferredProducts = useDeferredValue(products);
Теперь, если в кусочке коде главного компонента, который мы рассматривали на прошлом уроке, убрать строчку:
const [isPending, startTransition] = useTransition();
И строчку с использованием
isPending:
{isPending && <p>updating ...</p>}
А также снять обертку с функции
setFilterTerm, то мы получим тот
же результат, что и на прошлом уроке:
function updateFilterHandler(event) {
setFilterTerm(event.target.value);
}