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

[evisong]

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:

Screen.Recording.2024-06-25.at.10.33.38.mov

-- 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.