Hook di ottimizzazione delle prestazioni useDeferredValue in React

L'hook di ottimizzazione delle prestazioni useDeferredValue, così come useTransition, aiuta ad accelerare il lavoro dell'interfaccia grafica, ma lo fa in modo leggermente diverso.

Dai un'occhiata alla lezione precedente e guarda come nel caso di useTransition abbiamo avvolto la funzione di aggiornamento setFilterTerm. Ebbene, il codice di aggiornamento dello stato potrebbe non essere sempre disponibile. Potrebbe essere nascosto, ad esempio, in una libreria che hai collegato. In questo caso possiamo utilizzare l'hook useDeferredValue. Allora dobbiamo avvolgere lo stato stesso o il risultato, calcolato utilizzando questo stato, riducendo così la sua priorità.

Analizziamo il seguente frammento di codice del componente figlio ProductList:

import {useDeferredValue} from 'react'

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

Nota che qui abbiamo avvolto in useDeferredValue la variabile stessa products, che abbiamo preso dalle props del componente. Poi abbiamo memorizzato il risultato in deferredProducts, con la quale lavoreremo in seguito:

const deferredProducts = useDeferredValue(products);

Ora, se nel frammento di codice del componente principale, che abbiamo considerato nella lezione precedente, rimuoviamo la riga:

const [isPending, startTransition] = useTransition();

E la riga con l'utilizzo di isPending:

{isPending && <p>aggiornamento in corso ...</p>}

E togliere il wrapper dalla funzione setFilterTerm, allora otterremo lo stesso risultato della lezione precedente:

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