Skip to main content

React 19: Nuevos Hooks y API use

Introducción​

Documentación El 5 de diciembre de 2024, React presentó su versión 19 con nuevas funcionalidades diseñadas para simplificar el desarrollo. Entre las novedades más destacadas se encuentran los hooks useTransition, useActionState, useFormStatus, y la API use. Estas herramientas reducen la complejidad del código y mejoran la experiencia al trabajar con estados, formularios y manejo de datos asincrónicos.

Nuevos Hooks​

useTransition​

Permite manejar estados de espera (como isPending) en operaciones asincrónicas. Este hook es especialmente útil para mejorar la experiencia del usuario durante transiciones o solicitudes de red.

Ejemplo​

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

function UpdateName() {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      }
      redirect("/path");
    });
  };

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>Actualizar</button>
      {error && <p>{error}</p>}
    </div>
  );
}

Ventajas​

  • Gestiona automáticamente el estado de espera (isPending).
  • Reduce la necesidad de manejar múltiples estados manualmente.

useActionState​

Simplifica el manejo de formularios al devolver tres valores: state, formAction y isPending. Este hook permite trabajar con acciones de formulario y su estado de forma eficiente.

Ejemplo básico​

import { useActionState } from "react";

async function increment(prevState) {
  return prevState + 1;
}

function StatefulForm() {
  const [state, formAction] = useActionState(increment, 0);

  return (
    <form>
      {state}
      <button formAction={formAction}>Incrementar</button>
    </form>
  );
}

Ejemplo avanzado: Formulario de carrito​

function AddToCartForm({ itemID, itemTitle }) {
  const [message, formAction, isPending] = useActionState(addToCart, null);

  return (
    <form action={formAction}>
      <h2>{itemTitle}</h2>
      <input type="hidden" name="itemID" value={itemID} />
      <button type="submit">Añadir al carrito</button>
      {isPending ? "Cargando..." : message}
    </form>
  );
}

Beneficios​

  • Simplifica la gestión del estado en formularios.
  • Permite manejar la lógica del formulario directamente en funciones asincrónicas.

useFormStatus​

Proporciona información sobre el estado de la última solicitud de un formulario. Devuelve datos como pending, data, method y action.

Ejemplo​

import { useFormStatus } from "react-dom";

function UsernameForm() {
  const { pending, data } = useFormStatus();

  return (
    <div>
      <h3>Solicitar un nombre de usuario:</h3>
      <input type="text" name="username" disabled={pending} />
      <button type="submit" disabled={pending}>Enviar</button>
      <p>{data ? `Solicitando ${data.get("username")}...` : ""}</p>
    </div>
  );
}

Ventajas​

  • Proporciona un manejo centralizado del estado de los formularios.
  • Permite acceder a datos específicos de campos enviados mediante data.get().

Nueva API: use​

Descripción​

El nuevo hook use() permite consumir recursos en tiempo de renderizado, suspendiendo el componente hasta que las promesas asociadas se resuelvan. Esta API reemplaza hooks como useEffect, useState y useContext para el consumo de datos y contextos, simplificando significativamente el código.

Ejemplo​

import { use } from "react";

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise); // Suspende hasta que la promesa se resuelve
  return comments.map(comment => <p key={comment.id}>{comment.text}</p>);
}

function Page({ commentsPromise }) {
  return (
    <Suspense fallback={<div>Cargando...</div>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}

Beneficios​

  • Elimina la necesidad de gestionar manualmente estados como loading o error.
  • Se integra perfectamente con los límites de Suspense, permitiendo una experiencia de carga optimizada.
  • Unifica la lógica para manejar promesas y datos contextuales.

Conclusión​

React 19 representa un paso adelante en la simplificación del desarrollo con herramientas como useTransition, useActionState, useFormStatus y la nueva API use. Estas funcionalidades ofrecen una experiencia más fluida, reduciendo la complejidad del código y potenciando la productividad de los desarrolladores.