[React 19] requestFormReset reports TypeError Cannot read properties of null (reading 'queue') on repeated form submissions

[evisong]

trafficstars

Summary

Hi, React team,

I've recently been trying the new form actions in React 19, I'm trying to reproduce a race condition with multiple form submissions in a short time. However, I occasionally get the error TypeError Cannot read properties of null (reading 'queue') after a few consecutive submissions.

After some investigations, I'm able to create the minimal reproducing steps below:

1. Open codesandbox.io/p/sandbox/confident-sky-8vr69k

function App() {
  const formAction = async () => {
    await new Promise((resolve) => setTimeout(resolve, 3000));
  };

  return (
    <form action={formAction}>
      <input type="text" name="name" />
      <input type="submit" />
    </form>
  );
}

export default App;

2. Input "1" in the text field
3. Submit form
4. Within 3 seconds (before the Client Action resolved), submit the form again

Expected behavior: Form fields resetted.

Actual behavior: The page breaks reporting a TypeError below:

TypeError: Cannot read properties of null (reading 'queue')
requestFormReset$1
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:7001:74
eval
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:6956:15
startTransition
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:6908:27
startHostTransition
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:6948:7
listener
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:16008:21
processDispatchQueue
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:16066:17
eval
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:16665:9
batchedUpdates$1
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:2689:40
dispatchEventForPluginEventSystem
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:16221:7
dispatchEvent
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:20127:11
dispatchDiscreteEvent
https://gwprwq.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:20095:11

Am I missing anything? Thanks.

[eps1lon]

Thank you for the repro. The Codesandbox didn't load for me so I created a new one. We can repro this with just clicking submit buttons as well:

https://github.com/facebook/react/assets/12292047/6f4444ec-1393-4de5-aab8-ab8b5c93ba54

-- https://codesandbox.io/p/sandbox/confident-sky-8vr69k

1. Enter a value
2. Submit form
3. Submit again before form action resolved
4. Observe crash

[evisong]

Thanks for fixing the Codesandbox. Btw the React I used was 19.0.0-rc-3563387fe3-20240621.

[Parvezkhan0]

Is this issue resolved?

[evisong]

Hi, React team,

May I ask is there any update on this? Thanks.

[ryanflorence]

I'm running into this everywhere, including the official doc's demo of useFormStatus (when you remove the disabled button prop) and quickly click the button it reliably breaks

import { useFormStatus } from "react-dom";
import { submitForm } from "./actions.js";

function Submit() {
  const { pending } = useFormStatus();
  return <button type="submit">{pending ? "Submitting..." : "Submit"}</button>;
}

function Form({ action }) {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

export default function App() {
  return <Form action={submitForm} />;
}

https://codesandbox.io/p/sandbox/react-dev-forked-n57tkm

[rickhanlonii]

Thanks for reporting, this should be fixed with: https://github.com/facebook/react/pull/33055

Sandbox of @evisong's issue with the PR: https://codesandbox.io/p/sandbox/confident-sky-8vr69k

Sandbox of @ryanflorence's issue with that PR: https://codesandbox.io/p/sandbox/react-dev-forked-n57tkm

[chrisb2244]

I still see the same error (including in the sandbox linked above) if I click a bunch of times. Is there a maximum number of queued events or some timing requirement between them in the current fix (I'm using react@canary -> ^19.2.0-canary-280ff6fe-20250606 in my test project).

Can I avoid this by switching to exclusively controlled inputs, or will that have no effect here? Is there some other workaround to prevent this error?