Le Hook d'optimisation des performances useTransition dans React

Le Hook d'optimisation des performances useTransition nous permet de mettre à jour les états sans bloquer l'interface graphique.

Avec ce Hook, nous pouvons attribuer une priorité basse à la mise à jour d'un état, ce qui permettra aux mises à jour des autres états d'avoir une priorité haute et de s'exécuter sans délai.

Un exemple serait le filtrage d'une liste déroulante de produits pendant que l'utilisateur saisit des caractères dans le champ de recherche. Bien sûr, la liste elle-même peut s'afficher avec un certain retard, mais nous ne voudrions pas que les caractères soient saisis dans le champ de recherche avec un délai.

Voyons comment le Hook useTransition peut nous aider dans de tels cas. Supposons que nous ayons un morceau de code du composant principal. Analysons-le :

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

Ici, nous voyons deux variables pour useTransition. La variable isPending contient une valeur booléenne et indique si le processus de mise à jour est terminé, et startTransition est la fonction qui permet de réduire la priorité de la mise à jour :

const [isPending, startTransition] = useTransition();

Nous avons également l'état filterTerm, dans lequel est stockée l'expression saisie dans le champ de saisie et la fonction setFilterTerm pour le définir :

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

Lors de la saisie de caractères dans l'input, notre fonction updateFilterHandler est appelée à chaque fois, ce qui entraîne la mise à jour de filterTerm. C'est ici que nous utilisons notre Hook useTransition, en enveloppant la fonction de définition setFilterTerm dans startTransition de la manière suivante :

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

Ainsi, nous avons défini une priorité basse pour la mise à jour de l'état filterTerm et notre champ de saisie restera réactif.

À l'aide de la variable isPending, nous pouvons indiquer à l'utilisateur que la mise à jour de la liste est encore en cours. Affichons cette information sous le champ de saisie, pendant que la liste se met à jour :

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