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.',
]);