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

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

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

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