Der Performance-Optimierungs-Hook useTransition in React

Der Performance-Optimierungs-Hook useTransition ermöglicht es uns, Zustände zu aktualisieren, ohne die Benutzeroberfläche zu blockieren.

Mit diesem Hook können wir für die Aktualisierung eines Zustands eine niedrige Priorität festlegen, was es ermöglicht, dass die Aktualisierung anderer Zustände hohe Priorität hat und ohne Verzögerungen ausgeführt wird.

Als Beispiel kann die Filterung einer Dropdown-Liste von Produkten beim Eingeben von Zeichen in das Suchfeld angeführt werden. Natürlich kann die Liste selbst mit einer gewissen Verzögerung angezeigt werden, aber wir möchten nicht, dass die Zeichen im Suchfeld verzögert eingegeben werden.

Schauen wir uns an, wie uns der Hook useTransition in solchen Fällen helfen kann. Nehmen wir an, wir haben ein Code-Stück der Haupt- komponente. Analysieren wir es:

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

Hier sehen wir zwei Variablen für useTransition. Die Variable isPending enthält einen booleschen Wert und zeigt an, ob der Aktualisierungsprozess abgeschlossen ist, und startTransition ist die Funktion, die es ermöglicht, die Priorität der Aktualisierung herabzusetzen:

const [isPending, startTransition] = useTransition();

Wir haben auch den Zustand filterTerm, in dem der im Eingabefeld eingegebene Ausdruck gespeichert wird, und die Funktion setFilterTerm zu dessen Festlegung:

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

Bei der Eingabe von Zeichen in das Input-Feld wird jedes Mal die Funktion updateFilterHandler aufgerufen, in der die Aktualisierung von filterTerm stattfindet. Genau hier wenden wir unseren Hook useTransition an, indem wir die Funktion setFilterTerm in startTransition wie folgt wrappen:

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

Auf diese Weise haben wir für die Aktualisierung des Zustands filterTerm eine niedrige Priorität festgelegt und unser Eingabefeld bleibt reaktionsschnell.

Mithilfe der Variable isPending können wir dem Benutzer anzeigen, dass die Aktualisierung der Liste noch im Gange ist. Geben wir diese Information unter dem Eingabefeld aus, während die Liste aktualisiert wird:

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