Le Hook d'optimisation des performances useDeferredValue dans React

Le Hook d'optimisation des performances useDeferredValue, tout comme useTransition, aide à accélérer le travail de l'interface graphique, mais le fait d'une manière légèrement différente.

Jetez un œil à la leçon précédente et regardez comment dans le cas de useTransition nous enveloppions la fonction de mise à jour setFilterTerm. Eh bien, le code de mise à jour de l'état n'est pas toujours accessible. Il peut être caché, par exemple, dans une bibliothèque que vous avez connectée. Dans ce cas, nous pouvons utiliser le Hook useDeferredValue. Ensuite, nous devons envelopper soit l'état lui-même, soit le résultat, calculé à l'aide de cet état, réduisant ainsi sa priorité.

Analysons le morceau de code suivant du composant enfant ProductList :

import {useDeferredValue} from 'react'

function ProductList({ products }) {
	const deferredProducts = useDeferredValue(products);
	
	return (
		<ul>
			{deferredProducts.map((product) => (
				<li>{product}</li>
			))}
		</ul>
	);
}

Remarquez qu'ici nous avons enveloppé dans useDeferredValue la variable elle-même products, que nous avons tirée des props du composant. Ensuite, nous avons enregistré le résultat dans deferredProducts, avec laquelle nous travaillerons par la suite :

const deferredProducts = useDeferredValue(products);

Maintenant, si dans le morceau de code du composant principal, que nous avons examiné dans la leçon précédente, nous retirons la ligne :

const [isPending, startTransition] = useTransition();

Et la ligne utilisant isPending :

{isPending && <p>updating ...</p>}

Et aussi retirer l'enveloppe de la fonction setFilterTerm, alors nous obtiendrons le même résultat que dans la leçon précédente :

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