Hook optimalizácie výkonu useDeferredValue v Reacte

Hook optimalizácie výkonu useDeferredValue, podobne ako useTransition, pomáha zrýchliť prácu grafického rozhrania, ale robí to trochu inak.

Pozrite si predchádzajúcu lekciu a pozrite sa, ako v prípade useTransition sme obalili funkciu aktualizácie setFilterTerm. Kód aktualizácie stavu nemusí byť vždy dostupný. Môže byť skrytý, napríklad v knižnici, ktorú ste pripojili. V tomto prípade môžeme použiť hook useDeferredValue. Potom musíme obaliť buď samotný stav, alebo výsledok, vypočítaný pomocou tohto stavu, čím sa zníži jeho priorita.

Analyzujme nasledujúci kúsok kódu podradenej komponenty ProductList:

import {useDeferredValue} from 'react'

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

Všimnite si, že tu sme obalili v useDeferredValue samotnú premennú products, ktorú sme vzali z props komponentu. Potom sme zapísali výsledok do deferredProducts, s ktorou budeme ďalej pracovať:

const deferredProducts = useDeferredValue(products);

Teraz, ak v kúsku kódu hlavného komponentu, ktorý sme skúmali v predchádzajúcej lekcii, odstránime riadok:

const [isPending, startTransition] = useTransition();

A riadok s použitím isPending:

{isPending && <p>aktualizácia ...</p>}

A tiež odstrániť obal z funkcie setFilterTerm, dostaneme ten istý výsledok ako v predchádzajúcej lekcii:

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