Hook optimalizace výkonu useDeferredValue v Reactu

Hook optimalizace výkonu useDeferredValue, stejně jako useTransition, pomáhá zrychlit práci grafického rozhraní, ale dělá to trochu jinak.

Podívejte se na předchozí lekci a podívejte se, jak jsme v případě useTransition obalovali funkci aktualizace setFilterTerm. Takže, kód aktualizace stavu nemusí být vždy k dispozici. Může být skrytý, například v knihovně, kterou jste připojili. V tomto případě můžeme použít hook useDeferredValue. Potřebujeme obalit buď samotný stav, nebo výsledek, vypočítaný pomocí tohoto stavu, čímž snížíme jeho prioritu.

Pojďme analyzovat následující kousek kódu podřízené komponenty ProductList:

import {useDeferredValue} from 'react'

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

Všimněte si, že zde jsme obalili v useDeferredValue samotnou proměnnou products, kterou jsme vzali z props komponenty. Poté jsme zapsali výsledek do deferredProducts, s kterou budeme dále pracovat:

const deferredProducts = useDeferredValue(products);

Nyní, pokud v kousku kódu hlavní komponenty, kterou jsme zvažovali v předchozí lekci, odstraníme řádek:

const [isPending, startTransition] = useTransition();

A řádek s použitím isPending:

{isPending && <p>updating ...</p>}

A také odstranit obal z funkce setFilterTerm, dostaneme stejný výsledek jako v předchozí lekci:

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