Hook optymalizacji wydajności useTransition w React

Hook optymalizacji wydajności useTransition pozwala nam aktualizować stany bez blokowania interfejsu użytkownika.

Za pomocą tego hooka możemy ustawić aktualizacji jakiegoś stanu niski priorytet, co pozwoli aktualizacji innych stanów mieć wysoki priorytet i wykonywać się bez opóźnień.

Jako przykład można przytoczyć filtrowanie rozwijanej listy produktów podczas wprowadzania przez użytkownika znaków w polu wyszukiwania. Oczywiście, sama lista może wyświetlać się z pewnym opóźnieniem, ale nie chcielibyśmy, żeby znaki były wprowadzane w pole wyszukiwania z opóźnieniem.

Spójrzmy, jak w takich przypadkach może nam pomóc hook useTransition. Załóżmy, że mamy fragment kodu głównego komponentu. Przeanalizujmy go:

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

Tutaj widzimy dwie zmienne dla useTransition. Zmienna isPending zawiera wartość logiczną i pokazuje czy proces aktualizacji jest zakończony, a startTransition to funkcja, która pozwala obniżyć priorytet aktualizacji:

const [isPending, startTransition] = useTransition();

Mamy także stan filterTerm, w którym przechowywane jest wprowadzane w pole wprowadzania wyrażenie i funkcja setFilterTerm do jego ustawienia:

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

Podczas wprowadzania znaków w input za każdym razem wywoływana jest funkcja updateFilterHandler, w której następuje aktualizacja filterTerm. Właśnie tutaj stosujemy nasz hook useTransition, owijając funkcję ustawiającą setFilterTerm w startTransition w następujący sposób:

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

W ten sposób ustawiliśmy dla aktualizacji stanu filterTerm niski priorytet i nasze pole wprowadzania pozostanie reagujące.

Za pomocą zmiennej isPending możemy pokazać użytkownikowi, że aktualizacja listy jest jeszcze w trakcie. Wyświetlmy tę informację pod polem wprowadzania, dopóki lista jest aktualizowana:

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