From 1c4e7c4bb866dd319d66a614791db9213df5a9f7 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Thu, 14 Mar 2024 11:17:30 +0100
Subject: [PATCH] Ensure dispatch in `useFormState` works in `StrictMode`
---
packages/react-dom/src/__tests__/ReactDOMForm-test.js | 10 +++++++---
packages/react-reconciler/src/ReactFiberHooks.js | 6 ++++--
2 files changed, 11 insertions(+), 5 deletions(-)
diff --git a/packages/react-dom/src/__tests__/ReactDOMForm-test.js b/packages/react-dom/src/__tests__/ReactDOMForm-test.js
index 180d913b6e825..ea97b293ff707 100644
--- 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,7 +1325,13 @@ 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');
@@ -1334,7 +1339,6 @@ describe('ReactDOMForm', () => {
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
index 75acffc1b9a11..10c1cb9a9b465 100644
--- 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(