Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta Adatta ai principianti
  • Qualcosa non va?
#8,682 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Documentazione
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript, react
Ambito
documentation

Direzione di ricerca

Aggiorna la pagina di riferimento di useFormStatus all’indirizzo react.dev/reference/react-dom/hooks/useFormStatus. Leggi le sezioni Returns e Usage, quindi controlla la PR di React collegata e i casi in ReactDOMForm-test.js per confermare le condizioni descritte. Aggiungi la spiegazione dello stato in sospeso e un breve esempio con onSubmit/preventDefault()/startTransition; il lavoro è completato quando entrambe le chiamate richieste e il comportamento sono documentati accuratamente.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.
Lingua principale
JavaScript
Stelle
11.8k
Fork
8k
Merge medio
2g 31m
PR unite (30g)
8

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di reactjs/react.dev

Tutte le issue di reactjs/react.dev

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.