From b65afdd0c1f644f3630c4e8cfd9ac264c5ac329f Mon Sep 17 00:00:00 2001 From: Sophie Alpert Date: Fri, 24 Jan 2025 09:25:30 -0800 Subject: [PATCH] Clarify useActionState async non-transition warning (#32207) https://github.com/facebook/react/pull/28491#issuecomment-2094861155 --- packages/react-dom/src/__tests__/ReactDOMForm-test.js | 7 ++++--- packages/react-reconciler/src/ReactFiberHooks.js | 8 ++++---- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMForm-test.js b/packages/react-dom/src/__tests__/ReactDOMForm-test.js index 9fdfb3acba..d0977fa992 100644 --- a/packages/react-dom/src/__tests__/ReactDOMForm-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMForm-test.js @@ -1494,9 +1494,10 @@ describe('ReactDOMForm', () => { await act(() => dispatch()); assertConsoleErrorDev([ [ - 'An async function was passed to useActionState, but it was dispatched outside of an action context. ' + - 'This is likely not what you intended. ' + - 'Either pass the dispatch function to an `action` prop, or dispatch manually inside `startTransition`', + 'An async function with useActionState was called outside of a transition. ' + + 'This is likely not what you intended (for example, isPending will not update ' + + 'correctly). Either call the returned function inside startTransition, or pass it ' + + 'to an `action` or `formAction` prop.', {withoutStack: true}, ], ]); diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js index e76b78b2ce..f3a581a974 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.js +++ b/packages/react-reconciler/src/ReactFiberHooks.js @@ -2231,10 +2231,10 @@ function handleActionReturnValue( if (__DEV__) { if (!node.isTransition) { console.error( - 'An async function was passed to useActionState, but it was ' + - 'dispatched outside of an action context. This is likely not ' + - 'what you intended. Either pass the dispatch function to an ' + - '`action` prop, or dispatch manually inside `startTransition`', + 'An async function with useActionState was called outside of a transition. ' + + 'This is likely not what you intended (for example, isPending will not update ' + + 'correctly). Either call the returned function inside startTransition, or pass it ' + + 'to an `action` or `formAction` prop.', ); } }