Хук за оптимизација на перформансите useDeferredValue во React

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

Погледнете ја претходната лекција и видете како во случајот со useTransition ја обвивме функцијата за ажурирање setFilterTerm. Значи, кодот за ажурирање на state-от не е секогаш достапен. Тој може да е скриен, на пример, во библиотека која ја имате поврзано. Во овој случај можеме да го користиме hook-от useDeferredValue. Тогаш ни треба да го обвиеме или самиот state, или резултатот, пресметан со помош на овој state, со тоа што ќе го намалиме неговиот приоритет.

Ајде да го анализираме следниот дел од кодот на детското компонент 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>Ажурирање ...</p>}

Како и да ја тргнеме обвивката од функцијата setFilterTerm, ќе го добиеме истиот резултат како и во претходната лекција:

function updateFilterHandler(event) {
	setFilterTerm(event.target.value);
}