Ensure dispatch in useFormState works in StrictMode

facebook · Mar 14, 2024 · 1c4e7c4 · 1c4e7c4
1 parent c2f1a2c
commit 1c4e7c4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMForm-test.js b/packages/react-dom/src/__tests__/ReactDOMForm-test.js
@@ -1296,7 +1296,6 @@ describe('ReactDOMForm', () => {
     expect(container.textContent).toBe('B');
   });
 
-
   // @gate enableFormActions
   // @gate enableAsyncActions
   test('useFormState works in StrictMode', async () => {
@@ -1326,15 +1325,20 @@ describe('ReactDOMForm', () => {
     }
 
     const root = ReactDOMClient.createRoot(container);
-    await act(() => root.render(<React.StrictMode><App /></React.StrictMode>));
+    await act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
     assertLog(['0']);
     expect(container.textContent).toBe('0');
 
     await act(() => dispatch('increment'));
     assertLog(['Async action started [1]', 'Pending 0']);
     expect(container.textContent).toBe('Pending 0');
 
-
     await act(() => resolveText('Wait [1]'));
     assertLog(['1']);
     expect(container.textContent).toBe('1');

diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -2259,6 +2259,9 @@ function rerenderFormState<S, P>(
     );
   }
 
+  // For mount, pending is always false.
+  const [isPending] = updateState(false);
+
   // This is a mount. No updates to process.
   const state: Awaited<S> = stateHook.memoizedState;
 
@@ -2269,8 +2272,7 @@ function rerenderFormState<S, P>(
   // This may have changed during the rerender.
   actionQueueHook.memoizedState = action;
 
-  // For mount, pending is always false.
-  return [state, dispatch, false];
+  return [state, dispatch, isPending];
 }
 
 function pushEffect(