Ensure dispatch from useFormState works in StrictMode (#28557)

Co-authored-by: Andrew Clark <git@andrewclark.io>
This commit is contained in:
Sebastian Silbermann
2024-03-20 16:15:22 +01:00
committed by GitHub
parent 5cec48e145
commit 8ef14cf242
2 changed files with 50 additions and 0 deletions
+48
View File
@@ -1295,4 +1295,52 @@ describe('ReactDOMForm', () => {
assertLog(['B']);
expect(container.textContent).toBe('B');
});
// @gate enableFormActions
// @gate enableAsyncActions
test('useFormState works in StrictMode', async () => {
let actionCounter = 0;
async function action(state, type) {
actionCounter++;
Scheduler.log(`Async action started [${actionCounter}]`);
await getText(`Wait [${actionCounter}]`);
switch (type) {
case 'increment':
return state + 1;
case 'decrement':
return state - 1;
default:
return state;
}
}
let dispatch;
function App() {
const [state, _dispatch, isPending] = useFormState(action, 0);
dispatch = _dispatch;
const pending = isPending ? 'Pending ' : '';
return <Text text={pending + state} />;
}
const root = ReactDOMClient.createRoot(container);
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');
});
});
+2
View File
@@ -2259,6 +2259,8 @@ function rerenderFormState<S, P>(
);
}
updateWorkInProgressHook(); // State
// This is a mount. No updates to process.
const state: Awaited<S> = stateHook.memoizedState;