Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[Suggestion]: Document that useFormStatus works with a preventDefault-ed onSubmit + startTransition

Abierto Apto para principiantes
  • ¿Algo no está bien?
#8,682 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 4 días

@Felix-ming ya está trabajando en esto.

Desde el 6/10/2026.

  • #8683 de @Felix-ming — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
78/100
Tipo de issue
Documentación
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript, react
Área
documentation

Línea de trabajo

Actualiza la página de referencia de useFormStatus en react.dev/reference/react-dom/hooks/useFormStatus. Lee las secciones Returns y Usage y, después, comprueba el PR de React enlazado y los casos de ReactDOMForm-test.js para confirmar las condiciones descritas. Añade la explicación del estado pendiente y un ejemplo breve de onSubmit/preventDefault()/startTransition; estará terminado cuando ambas llamadas requeridas y el comportamiento estén documentados con precisión.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

type: documentation
Summary

Document that useFormStatus also reports pending: true when a submit event handler calls event.preventDefault() and starts a Transition with startTransition, not only when the form uses the action prop.

Page

https://react.dev/reference/react-dom/hooks/useFormStatus

Details

I'm implementing a custom <Form> component that accepts a Transition-based prop like submitAction (it validates and transforms the values, then calls submitAction inside startTransition). I wanted to provide the form's pending state through useFormStatus itself, instead of adding a custom context. While investigating, I found that this already works, but because it is not documented, I could not tell whether it is safe to rely on.

The useFormStatus page currently describes the status only in terms of the action prop on the parent <form>. However, since https://github.com/facebook/react/pull/29019 (shipped in React 19.0.0), useFormStatus is also activated when startTransition is called inside a submit event handler that is preventDefault-ed:

After this change, useFormStatus will also be activated if you call startTransition(actionFn) inside a submit event handler that is preventDefault-ed.

The PR describes this as the way for UI component libraries to implement a custom action prop with onSubmit, and the behavior is covered by tests in ReactDOMForm-test.js:

This matters for form components like mine that cannot use the action prop, for example because they validate and transform values before calling the action, or because they do not want the automatic form reset.

I confirmed the behavior with React 19.3.0 in Chrome.

Playground: https://codesandbox.io/p/sandbox/custom-useformstatus-fm2fkl

// App.js
import { startTransition, useActionState } from "react";
import { useFormStatus } from "react-dom";

// A fake request that takes 2 seconds.
function save(value) {
  return new Promise((resolve) => setTimeout(() => resolve(value), 2000));
}

// A form component in a UI library. It does not use the `action` prop,
// e.g. because it validates and transforms the values before calling the action.
function MyForm({ submitAction, children }) {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const value = new FormData(event.currentTarget).get("name");
        startTransition(async () => {
          await submitAction(value);
        });
      }}
    >
      {children}
    </form>
  );
}

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Sending" : "Send"}
    </button>
  );
}

function App() {
  const [state, sendAction] = useActionState(async (prev, value) => {
    await save(value);
    return value;
  }, null);
  return (
    <MyForm submitAction={sendAction}>
      <input name="name" />
      <SubmitButton />
      {state && <p>Saved: {state}</p>}
    </MyForm>
  );
}

export default App;

pending stays true until the action finishes, and the form is not reset.

Suggested changes:

  • In "Returns", say that pending is also true while a Transition started from a preventDefault-ed submit event of the parent <form> is pending.
  • In "Usage", add a short example of the onSubmit + preventDefault() + startTransition pattern, and note that both preventDefault() and startTransition in the same event are required.
Lenguaje dominante
JavaScript
Estrellas
11.8k
Forks
8k
Merge medio
5 d 11 h
PR fusionados (30 d)
5

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de reactjs/react.dev

Todos los issues de reactjs/react.dev

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.