React 19 ha introducido varios hooks nuevos que amplían las posibilidades del desarrollo con esta biblioteca, brindando formas más claras y eficientes de trabajar con datos, formularios y actualizaciones en la interfaz. Estos nuevos hooks responden a necesidades comunes que antes requerían soluciones más extensas o combinaciones de múltiples herramientas. A través de su uso, los componentes se vuelven más expresivos y concisos, lo cual facilita tanto su escritura como su mantenimiento.

Uno de los hooks más destacados es use(), que permite trabajar directamente con promesas o contextos dentro de un componente. Al pasarle una promesa, React detiene la renderización hasta que la promesa se resuelva, lo que permite acceder al resultado sin necesidad de usar useEffect o manejar estados de carga. Por ejemplo, si se desea obtener información de un usuario desde un servidor, se puede utilizar de la siguiente manera:

import { use } from 'react';

async function fetchUser() {
  const response = await fetch('/api/user');
  return response.json();
}

function Profile() {
  const user = use(fetchUser());

  return <h1>{user.name}</h1>;
}

En este fragmento, la interfaz se suspende hasta que fetchUser() devuelve la información, lo que hace más clara y directa la lógica de obtención de datos.

Otro hook útil es useActionState, pensado para manejar acciones asincrónicas como el envío de formularios. Este hook devuelve un estado, una función para ejecutar la acción y un indicador que muestra si la acción está en curso. Esto elimina la necesidad de estados adicionales para manejar errores o tiempos de espera. Su uso se puede ver en el siguiente ejemplo:

import { useActionState } from 'react';

function Form() {
  const [state, submitAction, isPending] = useActionState(
    async (prev, formData) => {
      const res = await fetch('/api/save', {
        method: 'POST',
        body: formData,
      });
      return res.json();
    },
    null
  );

  return (
    <form action={submitAction}>
      <input name="name" />
      <button disabled={isPending}>
        {isPending ? 'Guardando...' : 'Guardar'}
      </button>
      {state?.message && <p>{state.message}</p>}
    </form>
  );
}

Además, el hook useFormStatus permite a cualquier componente dentro de un formulario saber si dicho formulario se está enviando o si ocurrió algún cambio en su estado. Esto resulta útil para mostrar retroalimentación en botones u otros elementos sin necesidad de pasar props adicionales. Por ejemplo, un botón puede desactivarse automáticamente durante el envío:

import { useFormStatus } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Enviando...' : 'Enviar'}
    </button>
  );
}

Por último, useOptimistic facilita la implementación de actualizaciones optimistas, es decir, actualizaciones que se reflejan inmediatamente en la interfaz antes de que se confirme el resultado en el servidor. Esto mejora la fluidez de la experiencia para el usuario. Un ejemplo sencillo sería el conteo de "me gusta" en una publicación:

import { useOptimistic } from 'react';

function LikeButton({ initialLikes }) {
  const [likes, addLike] = useOptimistic(
    async (currentLikes) => {
      await fetch('/api/like', { method: 'POST' });
      return currentLikes + 1;
    },
    initialLikes
  );

  return <button onClick={addLike}>
    Me gusta ({likes})
  </button>;
}

En este caso, el número de "me gusta" aumenta de inmediato al hacer clic, incluso antes de que la solicitud al servidor se complete, lo que da una sensación de mayor rapidez.

Por ello, los nuevos hooks incorporados en React 19 aportan herramientas más simples para resolver necesidades frecuentes. Al permitir suspender la interfaz hasta obtener datos, manejar formularios de forma más clara, mostrar el estado del formulario desde cualquier componente o implementar actualizaciones optimistas, React continúa su evolución hacia un enfoque más declarativo y fácil de mantener. Estas funciones no buscan reemplazar todo lo anterior, sino ofrecer alternativas que, en muchos casos, pueden hacer que el desarrollo sea más directo y menos propenso a errores.