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;
}
}