Entendiendo el Hook useTransition en React

Hoy vamos a hablar sobre un hook de React que puede mejorar significativamente la experiencia del usuario en nuestras aplicaciones: useTransition. Este hook es parte de la familia de hooks de React introducidos en la versión 18 y está diseñado para manejar transiciones de estado de manera más eficiente.

¿Qué es useTransition?

El hook useTransition nos permite marcar ciertas actualizaciones de estado como transiciones. Esto es útil cuando queremos diferenciar entre actualizaciones urgentes (como la entrada de texto en un campo de formulario) y actualizaciones no urgentes (como la carga de una lista de resultados de búsqueda).

¿Cómo funciona?

El hook useTransition devuelve un array con dos elementos:

  1. startTransition: Una función que usamos para envolver las actualizaciones de estado que queremos marcar como transiciones.
  2. isPending: Un booleano que indica si hay una transición en curso.

Ejemplo de uso

Vamos a ver un ejemplo práctico para entender mejor cómo funciona useTransition.

import React, { useState, useTransition } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    setQuery(e.target.value);
    startTransition(() => {
      // Simulamos una búsqueda que tarda un poco en completarse
      const newResults = performSearch(e.target.value);
      setResults(newResults);
    });
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleChange} />
      {isPending ? <p>Loading...</p> : <ResultsList results={results} />}
    </div>
  );
}

function performSearch(query) {
  // Simulación de una búsqueda
  return ['result1', 'result2', 'result3'].filter(item => item.includes(query));
}

function ResultsList({ results }) {
  return (
    <ul>
      {results.map((result, index) => (
        <li key={index}>{result}</li>
      ))}
    </ul>
  );
}

export default SearchComponent;

Explicación del código

  1. Estado y hooks: Definimos tres estados: query para almacenar la consulta de búsqueda, results para almacenar los resultados de la búsqueda, y isPending para saber si hay una transición en curso. También obtenemos la función startTransition del hook useTransition.
  2. Manejo de cambios: En el manejador de cambios del input, actualizamos el estado query inmediatamente y luego usamos startTransition para envolver la actualización de los resultados de búsqueda. Esto marca la actualización de los resultados como una transición no urgente.
  3. Renderizado condicional: Mientras isPending es true, mostramos un mensaje de “Loading…”. Una vez que la transición termina, mostramos la lista de resultados.

Beneficios de usar useTransition

  • Mejora de la experiencia del usuario: Al diferenciar entre actualizaciones urgentes y no urgentes, podemos mantener la interfaz de usuario responsiva incluso cuando se están realizando operaciones costosas.
  • Optimización del rendimiento: React puede priorizar las actualizaciones urgentes y retrasar las no urgentes, lo que resulta en una mejor gestión de los recursos.