[React 19] When submitting a form action multiple times, requestFormReset throws the TypeError 'Cannot read null property (reading 'queue')'.

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -1955,6 +1955,63 @@ describe('ReactDOMForm', () => {
     expect(inputRef.current.value).toBe('Initial');
   });
 
+  it('submits once and then submits three times in quick succession', async () => {
+    const root = ReactDOMClient.createRoot(container);
+
+    const TestComponent = () => {
+      return (
+        <form
+          ref={formRef}
+          onSubmit={async e => {
+            e.preventDefault();
+            // Simulate an asynchronous operation that delays for 3 seconds
+            await new Promise(resolve => setTimeout(resolve, 3000));
+          }}>
+          <input type="text" name="name" ref={inputRef} />
+          <input type="submit" value="submit" />
+        </form>
+      );
+    };
+
+    const formRef = React.createRef();
+    const inputRef = React.createRef();
+    await act(() => root.render(<TestComponent />));
+
+    // Submit the form asynchronously once
+    await act(async () => {
+      await submit(formRef.current);
+    });
+
+    // Check the input value after the first submission
+    expect(inputRef.current.value).toBe('');
+
+    await act(() => {
+      startTransition(async () => {
+        // Submit the form.
+        await submit(formRef.current);
+        Scheduler.log('Action started');
+
+        // This happens after an `await`, and is not wrapped in startTransition,
+        // so it will be scheduled synchronously instead of with the transition.
+        // This is almost certainly a mistake, so we log a warning in dev.
+        requestFormReset(formRef.current);
+        Scheduler.log('Request form reset');
+      });
+    });
+
+    // Submit the form three more times in quick succession
+    for (let i = 0; i < 3; i++) {
+      await act(async () => {
+        await act(async () => {
+          await submit(formRef.current);
+        });
+      });
+    }
+
+    // Check the input value after the last submission
+    expect(inputRef.current.value).toBe('');
+  });
+
   it("regression: submitter's formAction prop is coerced correctly before checking if it exists", async () => {
     function App({submitterAction}) {
       return (

packages/react-reconciler/src/ReactFiberHooks.js

@@ -3200,7 +3200,7 @@ export function startHostTransition<F>(
 
 function ensureFormComponentIsStateful(formFiber: Fiber) {
   const existingStateHook: Hook | null = formFiber.memoizedState;
-  if (existingStateHook !== null) {
+  if (existingStateHook !== null && existingStateHook.next !== null) {
     // This fiber was already upgraded to be stateful.
     return existingStateHook;
   }
@@ -3288,6 +3288,9 @@ export function requestFormReset(formFiber: Fiber) {
   }
 
   const stateHook = ensureFormComponentIsStateful(formFiber);
+  const isEmpty = stateHook === null || stateHook.length === 0;
+  if (isEmpty) return;
+
   const newResetState = {};
   const resetStateHook: Hook = (stateHook.next: any);
   const resetStateQueue = resetStateHook.queue;
@@ -3537,6 +3540,8 @@ function dispatchSetStateInternal<S, A>(
   action: A,
   lane: Lane,
 ): boolean {
+  const isEmptyQueue = queue === null || queue.length === 0;
+  if (isEmptyQueue) return;
   const update: Update<S, A> = {
     lane,
     revertLane: NoLane,