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

Hook-ul de optimizare a performanței useTransition ne permite să actualizăm stările fără a bloca interfața grafică.

Cu ajutorul acestui hook putem acorda unei actualizări a unei stări o prioritate scăzută, ceea ce va permite actualizării altor stări să aibă prioritate mare și să se execute fără întârzieri.

Ca exemplu putem lua filtrarea unei liste derulante de produse în timp ce utilizatorul introduce caractere în câmpul de căutare. Bineînțeles, lista în sine poate fi afișată cu o oarecare întârziere, dar nu am dori ca caracterele introduse în câmpul de căutare să aibă întârziere.

Să vedem cum ne poate ajuta hook-ul useTransition în astfel de cazuri. Să presupunem că avem o bucată de cod a componentei principale. Să o analizăm:

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>
	);
}

Aici vedem două variabile pentru useTransition. Variabila isPending conține o valoare booleană și indică dacă procesul de actualizare s-a încheiat, iar startTransition este funcția care permite scăderea priorității actualizării:

const [isPending, startTransition] = useTransition();

De asemenea, avem starea filterTerm, în care este stocată expresia introdusă în câmpul de introducere și funcția setFilterTerm pentru setarea acesteia:

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

La introducerea caracterelor în input de fiecare dată este apelată funcția updateFilterHandler, în care are loc actualizarea filterTerm. Exact aici aplicăm hook-ul nostru useTransition, anvelopând funcția de setare setFilterTerm în startTransition astfel:

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

Astfel, am stabilit pentru actualizarea stării filterTerm o prioritate scăzută și câmpul nostru de introducere va rămâne receptiv.

Cu ajutorul variabilei isPending putem indica utilizatorului că actualizarea listei este încă în proces. Să afișăm această informație sub câmpul de introducere, cât timp lista se actualizează:

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