diff --git a/packages/react-dom/src/__tests__/ReactDOMForm-test.js b/packages/react-dom/src/__tests__/ReactDOMForm-test.js index 90efc90cbd17b..12c224949bdb2 100644 --- a/packages/react-dom/src/__tests__/ReactDOMForm-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMForm-test.js @@ -90,7 +90,7 @@ describe('ReactDOMForm', () => { const thenable = record.value; record.status = 'resolved'; record.value = text; - thenable.pings.forEach(t => t()); + thenable.pings.forEach(t => t(text)); } } @@ -1082,6 +1082,35 @@ describe('ReactDOMForm', () => { }); }); + // @gate enableFormActions + // @gate enableAsyncActions + test('queues multiple actions and runs them in order', async () => { + let action; + function App() { + const [state, dispatch] = useFormState( + async (s, a) => await getText(a), + 'A', + ); + action = dispatch; + return ; + } + + const root = ReactDOMClient.createRoot(container); + await act(() => root.render()); + assertLog(['A']); + + await act(() => action('B')); + await act(() => action('C')); + await act(() => action('D')); + + await act(() => resolveText('B')); + await act(() => resolveText('C')); + await act(() => resolveText('D')); + + assertLog(['D']); + expect(container.textContent).toBe('D'); + }); + // @gate enableFormActions // @gate enableAsyncActions test('useFormState: warns if action is not async', async () => { diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js index a78d3567c1e47..95860ff30bf2b 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.js +++ b/packages/react-reconciler/src/ReactFiberHooks.js @@ -1915,7 +1915,7 @@ function dispatchFormState( payload, next: first, }; - last.next = newLast; + actionQueue.pending = last.next = newLast; } }