diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js index 14345d3a30ad6..4f61912d4277b 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.js @@ -346,22 +346,23 @@ function commitHookEffectList( } else if (typeof destroy.then === 'function') { addendum = '\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' + + 'Instead, write the async function inside your effect ' + + 'and call it immediately:\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."; + ' async function fetchData() {\n' + + ' // You can await here\n' + + ' const response = await MyAPI.getData(someId);\n' + + ' // ...\n' + + ' }\n' + + ' fetchData();\n' + + '}, [someId]);\n\n' + + 'Learn more about data fetching with Hooks: https://fb.me/react-hooks-data-fetching'; } else { addendum = ' You returned: ' + destroy; } warningWithoutStack( false, - 'An Effect function must not return anything besides a function, ' + + 'An effect function must not return anything besides a function, ' + 'which is used for clean-up.%s%s', addendum, 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 087c8572cd66e..b02561c2e7a98 100644 --- a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js @@ -715,20 +715,20 @@ describe('ReactHooks', () => { const root1 = ReactTestRenderer.create(null); expect(() => root1.update()).toWarnDev([ - 'Warning: An Effect function must not return anything besides a ' + + 'Warning: An effect function must not return anything besides a ' + 'function, which is used for clean-up. You returned: 17', ]); const root2 = ReactTestRenderer.create(null); expect(() => root2.update()).toWarnDev([ - 'Warning: An Effect function must not return anything besides a ' + + 'Warning: An effect function must not return anything besides a ' + 'function, which is used for clean-up. You returned null. If your ' + 'effect does not require clean up, return undefined (or nothing).', ]); const root3 = ReactTestRenderer.create(null); expect(() => root3.update()).toWarnDev([ - 'Warning: An Effect function must not return anything besides a ' + + 'Warning: An effect function must not return anything besides a ' + 'function, which is used for clean-up.\n\n' + 'It looks like you wrote useEffect(async () => ...) or returned a Promise.', ]);