Hook de optimización de rendimiento useTransition en React

El hook de optimización de rendimiento useTransition nos permite actualizar los estados sin bloquear la interfaz gráfica.

Con este hook, podemos asignar una prioridad baja a la actualización de algún estado, lo que permitirá que las actualizaciones de otros estados tengan alta prioridad y se ejecuten sin demoras.

Como ejemplo, podemos mencionar la filtración de una lista desplegable de productos mientras el usuario introduce caracteres en el campo de búsqueda. Por supuesto, la propia lista puede mostrarse con cierto retraso, pero no nos gustaría que los caracteres se introdujeran en el campo de búsqueda con demora.

Veamos cómo en estos casos nos puede ayudar el hook useTransition. Supongamos que tenemos un fragmento de código del componente principal. Vamos a analizarlo:

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

Aquí vemos dos variables para useTransition. La variable isPending contiene un valor booleano e indica si ha finalizado el proceso de actualización, y startTransition es la función que permite reducir la prioridad de la actualización:

const [isPending, startTransition] = useTransition();

También tenemos el estado filterTerm, donde se almacena la expresión introducida en el campo de entrada y la función setFilterTerm para establecerlo:

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

Al introducir caracteres en el input, se llama cada vez a la función updateFilterHandler, donde se actualiza filterTerm. Es aquí donde aplicamos nuestro hook useTransition, envolviendo la función de establecimiento setFilterTerm en startTransition de la siguiente manera:

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

De este modo, hemos establecido una prioridad baja para la actualización del estado filterTerm y nuestro campo de entrada permanecerá responsivo.

Mediante la variable isPending podemos mostrar al usuario que la actualización de la lista aún está en proceso. Mostremos esta información debajo del campo de entrada, mientras la lista se actualiza:

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