Hook di Ottimizzazione delle Prestazioni useTransition in React

L'hook di ottimizzazione delle prestazioni useTransition ci permette di aggiornare gli stati senza bloccare l'interfaccia grafica.

Con l'aiuto di questo hook possiamo assegnare a un aggiornamento di qualche stato una priorità bassa, il che permetterà agli aggiornamenti degli altri stati di avere una priorità alta e di essere eseguiti senza ritardi.

Come esempio si può citare il filtraggio di un menu a discesa di prodotti mentre l'utente inserisce caratteri nel campo di ricerca. Certo, l'elenco stesso potrebbe essere visualizzato con un certo ritardo, ma non vorremmo che i caratteri venissero inseriti nel campo di ricerca con ritardo.

Diamo un'occhiata a come l'hook useTransition può aiutarci in questi casi. Supponiamo di avere un frammento di codice del componente principale. Analizziamolo:

import { useTransition } from 'react';
import { useState } from 'react';

function App() {
	const [isPending, startTransition] = useTransition();
	const [filterTerm, setFilterTerm] = useState('');
  
	const filteredProducts = filterProducts(filterTerm);
  
	function updateFilterHandler(event) {
		startTransition(() => {
			setFilterTerm(event.target.value);
		});
	}
 
	return (
		<div>
			<input type="text" onChange={updateFilterHandler} />
			<ProductList products={filteredProducts} />
		</div>
	);
}

Qui vediamo due variabili per useTransition. La variabile isPending contiene un valore booleano e indica se il processo di aggiornamento è terminato, mentre startTransition è la funzione che permette di abbassare la priorità di aggiornamento:

const [isPending, startTransition] = useTransition();

Abbiamo anche lo stato filterTerm, in cui è memorizzata l'espressione inserita nel campo di input e la funzione setFilterTerm per impostarlo:

const [filterTerm, setFilterTerm] = useState('');

Quando i caratteri vengono inseriti nell'input, la funzione updateFilterHandler viene chiamata ogni volta, e all'interno avviene l'aggiornamento di filterTerm. È proprio qui che applichiamo il nostro hook useTransition, avvolgendo la funzione di impostazione setFilterTerm in startTransition nel modo seguente:

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

In questo modo, abbiamo impostato una priorità bassa per l'aggiornamento dello stato filterTerm e il nostro campo di input rimarrà reattivo.

Tramite la variabile isPending possiamo mostrare all'utente che l'aggiornamento dell'elenco è ancora in corso. Visualizziamo questa informazione sotto il campo di input, mentre l'elenco si sta aggiornando:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>aggiornamento in corso ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);