Хук оптимизации производительности useDeferredValue en React

El hook de optimización de rendimiento useDeferredValue, al igual que useTransition, ayuda a acelerar el trabajo de la interfaz gráfica, pero lo hace de una manera ligeramente diferente.

Echa un vistazo a la lección anterior y observa cómo en el caso de useTransition envolvimos la función de actualización setFilterTerm. El caso es que el código de actualización del estado no siempre puede estar accesible. Puede estar oculto, por ejemplo, en una biblioteca que hayas conectado. En este caso, podemos utilizar el hook useDeferredValue. Entonces necesitamos envolver ya sea el estado mismo, o el resultado, calculado con ayuda de este estado, reduciendo así su prioridad.

Analicemos el siguiente fragmento de código del componente hijo ProductList:

import {useDeferredValue} from 'react'

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

Fíjate en que aquí envolvimos en useDeferredValue la propia variable products, que tomamos de las props del componente. Luego guardamos el resultado en deferredProducts, con la cual trabajaremos a continuación:

const deferredProducts = useDeferredValue(products);

Ahora, si en el fragmento de código del componente principal, que consideramos en la lección anterior, quitamos la línea:

const [isPending, startTransition] = useTransition();

Y la línea que utiliza isPending:

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

Y también quitamos el wrapper de la función setFilterTerm, entonces obtendremos el mismo resultado que en la lección anterior:

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