diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js index 9b0411eb18c40..82f059fef476e 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.js @@ -336,9 +336,17 @@ function commitHookEffectList( 'useEffect function must return a cleanup function or ' + 'nothing.%s%s', typeof destroy.then === 'function' - ? ' Promises and useEffect(async () => ...) are not ' + - 'supported, but you can call an async function inside an ' + - 'effect.' + ? '\n\nIt looks like you wrote useEffect(async () => ...) or returned a Promise. ' + + 'Instead, you may write an async function separately ' + + 'and then call it from inside the effect:\n\n' + + 'async function fetchComment(commentId) {\n' + + ' // You can await here\n' + + '}\n\n' + + 'useEffect(() => {\n' + + ' fetchComment(commentId);\n' + + '}, [commentId]);\n\n' + + 'In the future, React will provide a more idiomatic solution for data fetching ' + + "that doesn't involve writing effects manually." : '', getStackByFiberInDevAndProd(finishedWork), ); diff --git a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js index 468bbcb3c0a5e..709d819d6713e 100644 --- a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js @@ -75,10 +75,8 @@ describe('ReactHooks', () => { expect(() => { root.update(); }).toWarnDev([ - 'Warning: useEffect function must return a cleanup function or ' + - 'nothing. Promises and useEffect(async () => ...) are not supported, ' + - 'but you can call an async function inside an effect.\n' + - ' in App (at **)', + 'Warning: useEffect function must return a cleanup function or nothing.\n\n' + + 'It looks like you wrote useEffect(async () => ...) or returned a Promise.', ]); });