A useTransition teljesítményoptimalizáló hook a React-ben

A useTransition teljesítményoptimalizáló hook lehetővé teszi számunkra, hogy a state-eket frissítsük anélkül, hogy blokkolnánk a felhasználói felületet.

Ezzel a hookkal alacsonyabb prioritást rendelhetünk egy state frissítéséhez, ami lehetővé teszi, hogy más state-ek frissítései magas prioritással rendelkezzenek és késleltetés nélkül hajtódjanak végre.

Példaként említhetjük egy terméklistának a szűrését, miközben a felhasználó karaktereket ír be a keresőmezőbe. Természetesen maga a lista megjelenhet valamilyen késéssel, de szeretnénk elkerülni, hogy a karakterek a keresőmezőbe késéssel jelenjenek meg.

Nézzük meg, hogyan segíthet ebben az esetben a useTransition hook. Tegyük fel, hogy van egy kódrészletünk a fő komponensben. Elemezzük meg:

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

Itt két változót látunk a useTransition számára. A isPending változó logikai értéket tartalmaz, és azt mutatja, befejeződött-e a frissítési folyamat, míg a startTransition egy függvény, amely lehetővé teszi a frissítés prioritásának csökkentését:

const [isPending, startTransition] = useTransition();

Van továbbá egy filterTerm state-ünk, amely a bemeneti mezőbe írt kifejezést tárolja, valamint egy setFilterTerm függvény annak beállításához:

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

Amikor karaktereket írunk be a bemeneti mezőbe, minden alkalommal meghívódik a updateFilterHandler függvény, amelyben a filterTerm frissül. Itt alkalmazzuk a useTransition hookunkat, becsomagolva a setFilterTerm beállító függvényt a startTransition függvénybe a következő módon:

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

Így alacsony prioritást állítottunk be a filterTerm state frissítéséhez, és a bemeneti mezőnk reagálékony marad.

A isPending változó segítségével jelezhetjük a felhasználónak, hogy a lista frissítése még folyamatban van. Jelenítsük meg ezt az információt a bemeneti mező alatt, amíg a lista frissül:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>frissítés folyamatban ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);