Hook-ul de optimizare a performanței useDeferredValue în React

Hook-ul de optimizare a performanței useDeferredValue, la fel ca și useTransition, ajută la accelerarea lucrului interfeței grafice, dar o face puțin diferit.

Aruncați o privire la lecția anterioară și vedeți cum în cazul useTransition am împachetat funcția de actualizare setFilterTerm. Ei bine, codul de actualizare a stării poate să nu fie întotdeauna disponibil. Acesta poate fi ascuns, de exemplu, într-o bibliotecă pe care ați conectat-o. În acest caz, putem folosi hook-ul useDeferredValue. Atunci avem nevoie să împachetăm fie starea în sine, fie rezultatul, calculat cu ajutorul acestei stări, reducând astfel prioritatea sa.

Să analizăm următoarea bucată de cod a componentei copil ProductList:

import {useDeferredValue} from 'react'

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

Observați că aici am împachetat în useDeferredValue variabila în sine products, pe care am luat-o din proprietățile componentei. Apoi am scris rezultatul în deferredProducts, cu care vom lucra în continuare:

const deferredProducts = useDeferredValue(products);

Acum, dacă în bucata de cod a componentei principale, pe care am analizat-o în lecția anterioară, eliminăm linia:

const [isPending, startTransition] = useTransition();

Și linia cu utilizarea isPending:

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

Și, de asemenea, să îndepărtăm împachetarea de pe funcția setFilterTerm, atunci vom obține același rezultat ca în lecția anterioară:

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