¿En qué se diferencia useActionState de React 19 del hook experimental useFormState de ReactDOM?

useFormState era un hook experimental ubicado en react-dom. En React 19 se promovió al núcleo 'react' bajo el nombre useActionState. Además, su tupla de retorno se amplió a tres elementos: [state, formAction, isPending], eliminando la necesidad de recurrir a useTransition por separado para conocer el estado de carga de la acción.

¿Por qué useFormStatus no funciona dentro del componente que declara el ?

useFormStatus se implementa sobre Context API. El elemento actúa como Context Provider para sus descendientes. Según el modelo de componentes de React, un componente no puede consumir un contexto del cual es el propio proveedor en ese mismo nivel. useFormStatus debe llamarse estrictamente en subcomponentes hijos.

¿Cómo se implementan múltiples botones de envío con acciones distintas en un mismo formulario en React 19?

HTML5 y React 19 admiten el atributo formAction en los botones . Si el formulario tiene definido un action={accionPrincipal}, un botón secundario puede especificar . Al hacer clic, React invocará la acción secundaria enviándole el FormData actual.

¿Puede emplearse useActionState en aplicaciones cliente (SPA) sin Next.js ni Server Actions?

Sí. useActionState forma parte de la biblioteca central 'react' y opera idénticamente en SPAs de cliente (como proyectos Vite). La función de acción puede ser cualquier método asíncrono de cliente que realice peticiones fetch hacia una API REST o GraphQL externa.

¿Qué parámetro recibe como primer argumento la función de acción en useActionState?

El primer argumento es previousState (el estado devuelto por la ejecución anterior de la acción o initialState en el primer render). El segundo argumento es la carga útil: una instancia de FormData si proviene del envío de un formulario, o argumentos personalizados si se invocó directamente formAction(payload).

¿Cómo opera el mecanismo de reversión automática (Rollback) en useOptimistic?

useOptimistic conserva una proyección transitoria ligada al ciclo de vida de la transición de la acción. Al concluir con éxito, React confirma el nuevo estado del servidor y retira la capa optimista. Si la promesa se rechaza (reject), el nuevo estado base jamás se confirma y la capa transitoria se elimina, retornando la interfaz al último estado verificado sin código imperativo adicional.

¿De qué forma garantiza React 19 la Mejora Progresiva en formularios?

Cuando se asocia una Server Action al atributo action de un , React lo renderiza como un formulario HTML estándar con método POST. Si el usuario envía datos antes de que el bundle de JavaScript se descargue o hidrate, el navegador despacha un POST HTTP nativo. El servidor procesa el FormData y devuelve el HTML resultante. Al cargar el JS, React intercepta el submit y conmuta a un flujo SPA sin recarga.

¿Cómo gestiona useOptimistic varios envíos rápidos sucesivos antes de recibir respuesta del servidor?

useOptimistic aplica su función reductora en secuencia para cada actualización optimista sobre el estado base actual, encadenando las transformaciones transitorias. A medida que las acciones asíncronas se completan, el estado base se actualiza y las operaciones pendientes restantes se recalculan sobre el nuevo estado confirmado.

React 19 Actions: useActionState, useOptimistic y formularios nativos — React 19 Core y Arquitectura

Por qué es fundamental#

En las primeras versiones de React, la gestión de formularios se convirtió en una de las áreas más sobrecargadas y propensas a código repetitivo. El patrón estándar predominante eran los "componentes controlados" (Controlled Components), donde cada pulsación de tecla disparaba un evento onChange, actualizaba el estado local mediante useState y desencadenaba un re-renderizado completo del componente.

En aplicaciones corporativas a gran escala, esto exigía recurrir a pesadas bibliotecas externas (Formik, React Hook Form), provocaba una alta presión de memoria por asignaciones frecuentes y rompía por completo la Mejora Progresiva (Progressive Enhancement): sin descargar el bundle de JavaScript, el formulario resultaba totalmente inerte.

React 19 acomete un giro arquitectónico hacia los estándares de la plataforma web al introducir las React Actions. Las Actions son funciones de transición asíncronas integradas de forma nativa con los elementos HTML <form>, <input> y <button>.

Internamente, React 19 automatiza cuatro aspectos clave del ciclo de vida de mutación:

Recolección automatizada de datos: Inyección directa de una instancia nativa de FormData en el manejador sin sincronización manual de estado.
Control del ciclo de vida de carga: Estados isPending integrados y el hook contextual useFormStatus para componentes hijos.
Actualizaciones optimistas (Optimistic UI): Mutación predictiva e instantánea de la interfaz mediante el hook useOptimistic, con rollback automático si la petición de red se rechaza.
Sincronización fluida del estado del servidor: El hook useActionState, que unifica respuestas previas, errores de validación y estados de mutación.

Modelo mental#

Bajo el paradigma de React 19, un formulario se modela como una máquina de estados finitos declarativa. La prop action recibe una función que acepta una instancia nativa de FormData (o argumentos arbitrarios) en lugar de un React.FormEvent sintético, ejecutándose concurrentemente en TransitionLane.

text

[ El usuario pulsa "Enviar" ]
              │
              ▼
[ Despacho de la Action (useActionState) ]
              │
              ├───► [ useOptimistic: La UI muta al instante con el estado proyectado ]
              │
              ├───► [ useFormStatus: El botón pasa a pending = true ]
              │
              ▼ (Ejecución asíncrona: Red / Server Action)
     ┌────────┴────────┐
     │                 │
(Éxito 200 OK)    (Fallo 500 / Error de red)
     │                 │
     ▼                 ▼
[ Commit de estado ] [ Rollback automático en useOptimistic ]
[ isPending = false ] [ Renderizado del error en useActionState ]

El hook useOptimistic crea una capa transitoria superpuesta al estado base confirmado. Mientras la transición asíncrona está en vuelo, la interfaz renderiza esta proyección predictiva. Cuando la promesa se resuelve con éxito, el estado confirmado asume el control y la capa optimista se repliega. Si la operación falla (reject), React descarta automáticamente la capa optimista, restaurando la UI al último estado confirmado sin necesidad de código de rollback manual.

Ключевой момент

A diferencia de los patrones antiguos donde el desarrollador debía capturar instantáneas en bloques try/catch y restaurar el estado manualmente ante errores de red, useOptimistic está acoplado al ciclo de vida de la transición. Un fallo en la promesa cancela la transacción y restituye el estado confirmado de forma limpia.

Ciclo de vida de ejecución de una React 19 Action#

Ciclo de vida de una React 19 Action

1. Disparo del envío del formulario

El usuario ejecuta el submit. React empaqueta los campos con nombre en una instancia nativa de FormData.

2. Activación de estados de carga

React DOM propaga useFormStatus (pending = true) a todos los elementos hijos del formulario sin prop drilling.

3. Renderizado de la proyección optimista

El componente invoca updateOptimistic. La interfaz refleja el cambio de inmediato antes del tránsito por la red.

4. Ejecución asíncrona de la Action

useActionState procesa la función asíncrona en TransitionLane. Los datos se envían al servidor o se resuelven localmente.

5. Liquidación o reversión (Rollback)

El estado confirmado sustituye la capa optimista. Si la red falla, la proyección optimista se elimina limpiamente.

PUNTO DE CONTROL #1

Comprobación de conocimientos: Arquitectura de Actions y Mejora Progresiva

+15 XP

¿Qué sucede al enviar un formulario configurado con <form action={myServerAction}> si el JavaScript del cliente aún no se ha descargado o está desactivado?

Canalización arquitectónica de React 19 Actions#

Canalización de arquitectura

Canalización de procesamiento de formularios en React 19

4 etapas

1. Disparo de envío

Form SubmitPlantilla / UI

El usuario confirma la acción. El navegador genera un FormData a partir de los controles de entrada con nombre.

Artefactos:<form action={formAction}>FormData

2. Mutación optimista

useOptimisticNúcleo / Sistema

El manejador ejecuta dispatchOptimistic(). La UI dibuja el elemento proyectado de forma síncrona antes de la llamada de red.

Artefactos:setOptimisticTodosisPending = true

3. Procesamiento asíncrono

Async TransitionNúcleo / Sistema

Se ejecuta la petición o Server Action. El contexto useFormStatus deshabilita los botones de envío.

Artefactos:useActionStateuseFormStatus

4. Liquidación o Rollback

State Sync / RollbackNúcleo / Sistema

Con éxito, la respuesta del servidor se convierte en estado canónico. Ante error, la capa optimista revierte sin dejar rastro.

Artefactos:Rollback LayerActionState<T>

Comparativa de paradigmas de gestión de formularios#

Evolución de los formularios en React

Критерий	Formularios controlados (React 16-18 + RHF/Formik)	React 19 Actions nativas
Gestión de valores de entrada	Estado manual por campo (value + onChange) o registro personalizado de refs	Campos nativos no controlados recolectados mediante la API FormData
Mejora progresiva (sin JS)	Inexistente: el botón de envío no responde antes de hidratar el bundle	Soporte íntegro: se envía mediante HTTP POST estándar antes de ejecutar JS
Actualizaciones optimistas	Lógica imperativa compleja: capturar snapshots, bloques catch y rollback manual	Hook declarativo useOptimistic con reversión automática en caso de error
Estado de carga en botones	Prop-drilling de banderas isLoading a través de toda la jerarquía de componentes	Hook contextual useFormStatus accesible en cualquier componente hijo

Implementación práctica: Gestor de tareas con Optimistic UI#

A continuación se muestra un componente de producción que integra useActionState, useOptimistic, useFormStatus y formAction nativo con tipado estricto en TypeScript:

tsxsrc/components/TaskManager.tsx

import React, { useActionState, useOptimistic } from 'react';
import { useFormStatus } from 'react-dom';

// 1. Contratos de datos
export interface TaskItem {
  id: string;
  title: string;
  priority: 'low' | 'medium' | 'high';
  createdAt: number;
}

export interface TaskActionState {
  tasks: TaskItem[];
  error: string | null;
  lastCreatedId: string | null;
}

// 2. Componente de botón aislado con useFormStatus
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button
      type="submit"
      disabled={pending}
      className="px-4 py-2 bg-accent-cyan text-bg-surface font-semibold rounded-md disabled:opacity-50 flex items-center gap-2"
    >
      {pending ? (
        <>
          <span className="animate-spin inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full" />
          Guardando...
        </>
      ) : (
        'Crear tarea'
      )}
    </button>
  );
}

// 3. Manejador de Action asíncrona
async function taskActionHandler(
  prevState: TaskActionState,
  formData: FormData
): Promise<TaskActionState> {
  const title = formData.get('title') as string | null;
  const priority = (formData.get('priority') as TaskItem['priority']) || 'medium';

  // Validación de datos
  if (!title || title.trim().length < 3) {
    return {
      ...prevState,
      error: 'El título de la tarea debe tener al menos 3 caracteres.',
    };
  }

  try {
    // Simulación de mutación de red
    await new Promise((resolve, reject) => {
      setTimeout(() => {
        // Fallo simulado para comprobar la reversión en Optimistic UI
        if (title.toLowerCase().includes('error')) {
          reject(new Error('Fallo de red al persistir la tarea.'));
        } else {
          resolve(true);
        }
      }, 1000);
    });

    const newTask: TaskItem = {
      id: crypto.randomUUID(),
      title: title.trim(),
      priority,
      createdAt: Date.now(),
    };

    return {
      tasks: [newTask, ...prevState.tasks],
      error: null,
      lastCreatedId: newTask.id,
    };
  } catch (err: unknown) {
    const message = err instanceof Error ? err.message : 'Error desconocido del servidor.';
    return {
      ...prevState,
      error: message,
    };
  }
}

// 4. Componente principal del gestor de tareas
export function TaskManager({ initialTasks }: { initialTasks: TaskItem[] }) {
  const initialState: TaskActionState = {
    tasks: initialTasks,
    error: null,
    lastCreatedId: null,
  };

  // Gestión del ciclo de vida de la Action
  const [state, formAction, isPending] = useActionState(taskActionHandler, initialState);

  // Capa optimista
  const [optimisticTasks, addOptimisticTask] = useOptimistic(
    state.tasks,
    (currentTasks, pendingTitle: string): TaskItem[] => [
      {
        id: `optimistic-${Date.now()}`,
        title: pendingTitle,
        priority: 'medium',
        createdAt: Date.now(),
      },
      ...currentTasks,
    ]
  );

  const handleSubmit = async (formData: FormData) => {
    const rawTitle = formData.get('title') as string;
    if (rawTitle && rawTitle.trim().length >= 3) {
      // Inyección optimista instantánea
      addOptimisticTask(rawTitle);
    }
    // Delegar al despachador de useActionState
    await formAction(formData);
  };

  return (
    <div className="task-manager p-6 max-w-xl mx-auto space-y-6">
      <h2 className="text-2xl font-bold text-text-primary">Gestión de tareas (React 19)</h2>

      {state.error && (
        <div className="p-3 bg-red-900/30 border border-red-500 rounded-md text-red-200 text-sm">
          {state.error}
        </div>
      )}

      {/* El formulario utiliza la prop nativa action sin onSubmit */}
      <form action={handleSubmit} className="space-y-4">
        <div>
          <label htmlFor="title" className="block text-sm font-medium mb-1">
            Título de la tarea
          </label>
          <input
            id="title"
            name="title"
            type="text"
            required
            placeholder="Introduce el título..."
            className="w-full px-3 py-2 border border-border rounded-md bg-bg-surface"
          />
        </div>

        <div>
          <label htmlFor="priority" className="block text-sm font-medium mb-1">
            Prioridad
          </label>
          <select
            id="priority"
            name="priority"
            className="w-full px-3 py-2 border border-border rounded-md bg-bg-surface"
          >
            <option value="low">Baja</option>
            <option value="medium">Media</option>
            <option value="high">Alta</option>
          </select>
        </div>

        <div className="flex items-center justify-between">
          <SubmitButton />
          {isPending && (
            <span className="text-xs text-text-muted">Sincronizando con el servidor...</span>
          )}
        </div>
      </form>

      <div className="task-list space-y-2">
        <h3 className="text-lg font-semibold">Tareas registradas</h3>
        {optimisticTasks.map(task => {
          const isOptimistic = task.id.startsWith('optimistic-');
          return (
            <div
              key={task.id}
              className={`p-3 border rounded-md flex justify-between items-center transition-all ${
                isOptimistic
                  ? 'opacity-50 border-dashed border-accent-cyan bg-accent-cyan/5'
                  : 'border-border bg-bg-surface'
              }`}
            >
              <div>
                <span className="font-medium">{task.title}</span>
                {isOptimistic && (
                  <span className="ml-2 text-[10px] px-1.5 py-0.5 rounded bg-accent-cyan/20 text-accent-cyan">
                    Optimista
                  </span>
                )}
              </div>
              <span className="text-xs text-text-muted">{task.priority}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

PUNTO DE CONTROL #2

Comprobación de conocimientos: useFormStatus y límites de Context API

+15 XP

¿Por qué invocar const { pending } = useFormStatus() devuelve false si se ejecuta en el mismo componente que renderiza la etiqueta <form>?

Artefacto de producción: Generador tipado de Server Actions#

Para homogeneizar las signaturas de las actions en bases de código corporativas, implemente este constructor con validación Zod:

Production Artifactsrc/utils/action-builder.ts

Envoltorio tipado para manejadores de FormData con validación mediante esquemas Zod y formato normalizado ActionResponse.

typescript

import { z } from 'zod';

export interface ActionResponse<T> {
  data: T | null;
  errors: Record<string, string[]> | null;
  serverError: string | null;
  success: boolean;
}

export function createFormAction<TSchema extends z.ZodTypeAny, TResult>(
  schema: TSchema,
  handler: (data: z.infer<TSchema>) => Promise<TResult>
) {
  return async (
    prevState: ActionResponse<TResult>,
    formData: FormData
  ): Promise<ActionResponse<TResult>> => {
    const rawData = Object.fromEntries(formData.entries());
    const validation = schema.safeParse(rawData);

    if (!validation.success) {
      return {
        data: null,
        errors: validation.error.flatten().fieldErrors,
        serverError: null,
        success: false,
      };
    }

    try {
      const result = await handler(validation.data);
      return {
        data: result,
        errors: null,
        serverError: null,
        success: true,
      };
    } catch (err: unknown) {
      const errorMsg = err instanceof Error ? err.message : 'Error crítico en la ejecución de la acción.';
      return {
        data: null,
        errors: null,
        serverError: errorMsg,
        success: false,
      };
    }
  };
}

Errores comunes de desarrollo#

Ошибка: Invocar useFormStatus en el mismo componente que <form>

El hook useFormStatus obtiene su estado desde un contexto de React DOM provisto por el elemento <form> a sus hijos. Invocar useFormStatus dentro del componente que renderiza <form> devuelve siempre { pending: false, data: null } porque busca un formulario ancestro en el árbol superior.

tsx

// ❌ INCORRECTO: Hook invocado al mismo nivel que <form>, pending siempre es false
export function BadForm() {
  const { pending } = useFormStatus(); // ¡No funciona!

  return (
    <form action={myAction}>
      <button disabled={pending}>Enviar</button>
    </form>
  );
}

// ✅ CORRECTO: Extraer el botón a un subcomponente hijo independiente
function SubmitBtn() {
  const { pending } = useFormStatus(); // Lee correctamente el contexto ancestro
  return <button disabled={pending}>Enviar</button>;
}

export function GoodForm() {
  return (
    <form action={myAction}>
      <SubmitBtn />
    </form>
  );
}

Ошибка: Llamar manualmente a e.preventDefault() en formularios con action

Al migrar código antiguo, los programadores suelen conservar onSubmit={(e) => e.preventDefault()}. Esto desactiva el cauce nativo de Actions de React 19: el formulario no genera el FormData, no activa useFormStatus y pierde la capacidad de Progressive Enhancement.

tsx

// ❌ INCORRECTO: preventDefault anula el ciclo de vida de React 19 Actions
<form
  action={formAction}
  onSubmit={(e) => {
    e.preventDefault(); // ¡Interrumpe la ejecución de la Action!
  }}
>

Ошибка: Ejecutar dispatchOptimistic fuera de una Transition o Action

El despachador que devuelve useOptimistic solo puede invocarse dentro de un startTransition activo o en el manejador de una action vinculada a <form action={...}>. Ejecutarlo en un manejador síncrono estándar (como un onClick común) provocará que React descarte de inmediato la capa optimista al no poder enlazarla con una transición en curso.

Ошибка: Confiar en la validación HTML5 del cliente sin validación en el servidor

Dado que React 19 promueve formularios no controlados, las restricciones de validación HTML5 (required, type="email") pueden omitirse fácilmente mediante llamadas HTTP directas o modificación del DOM. La action debe validar siempre el formData mediante esquemas en el servidor (como Zod) y devolver los errores correspondientes en ActionState.

Preguntas de entrevista técnica#

Preguntas de entrevista8 preguntas

Temas relacionados

Renderizado concurrente: startTransition e interfaces no bloqueantes— Cómo el planificador de React gestiona transiciones asíncronas bajo useActionState.El hook use() en React 19: Promesas y streaming con Suspense— Integración de streaming de datos y resolución condicional de recursos con formularios.