Hook optymalizacji wydajności useDeferredValue w React

Hook optymalizacji wydajności useDeferredValue, podobnie jak useTransition, pomaga przyspieszyć działanie interfejsu użytkownika, ale robi to nieco inaczej.

Spójrz na poprzednią lekcję i zobacz, jak w przypadku useTransition opakowywaliśmy funkcję aktualizującą setFilterTerm. Otóż, kod aktualizujący stan nie zawsze może być dostępny. Może być ukryty, na przykład w bibliotece, którą podłączyłeś. W tym przypadku możemy skorzystać z hooka useDeferredValue. Wtedy musimy opakować albo sam stan, albo wynik obliczany za pomocą tego stanu, tym samym obniżając jego priorytet.

Przeanalizujmy następujący fragment kodu komponentu potomnego ProductList:

import {useDeferredValue} from 'react'

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

Zwróć uwagę, że tutaj opakowaliśmy w useDeferredValue samą zmienną products, którą wzięliśmy z propsów komponentu. Następnie zapisaliśmy wynik w deferredProducts, z którą będziemy dalej pracować:

const deferredProducts = useDeferredValue(products);

Teraz, jeśli we fragmencie kodu głównego komponentu, który rozważaliśmy w poprzedniej lekcji, usuniemy linijkę:

const [isPending, startTransition] = useTransition();

Oraz linijkę z użyciem isPending:

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

A także zdjąć opakowanie z funkcji setFilterTerm, to otrzymamy ten sam wynik, co w poprzedniej lekcji:

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