Skip to content

Commit 9d77a31

Browse files
authored
Improve async useEffect warning (#15104)
1 parent 103378b commit 9d77a31

File tree

2 files changed

+14
-13
lines changed

2 files changed

+14
-13
lines changed

packages/react-reconciler/src/ReactFiberCommitWork.js

+11-10
Original file line numberDiff line numberDiff line change
@@ -346,22 +346,23 @@ function commitHookEffectList(
346346
} else if (typeof destroy.then === 'function') {
347347
addendum =
348348
'\n\nIt looks like you wrote useEffect(async () => ...) or returned a Promise. ' +
349-
'Instead, you may write an async function separately ' +
350-
'and then call it from inside the effect:\n\n' +
351-
'async function fetchComment(commentId) {\n' +
352-
' // You can await here\n' +
353-
'}\n\n' +
349+
'Instead, write the async function inside your effect ' +
350+
'and call it immediately:\n\n' +
354351
'useEffect(() => {\n' +
355-
' fetchComment(commentId);\n' +
356-
'}, [commentId]);\n\n' +
357-
'In the future, React will provide a more idiomatic solution for data fetching ' +
358-
"that doesn't involve writing effects manually.";
352+
' async function fetchData() {\n' +
353+
' // You can await here\n' +
354+
' const response = await MyAPI.getData(someId);\n' +
355+
' // ...\n' +
356+
' }\n' +
357+
' fetchData();\n' +
358+
'}, [someId]);\n\n' +
359+
'Learn more about data fetching with Hooks: https://fb.me/react-hooks-data-fetching';
359360
} else {
360361
addendum = ' You returned: ' + destroy;
361362
}
362363
warningWithoutStack(
363364
false,
364-
'An Effect function must not return anything besides a function, ' +
365+
'An effect function must not return anything besides a function, ' +
365366
'which is used for clean-up.%s%s',
366367
addendum,
367368
getStackByFiberInDevAndProd(finishedWork),

packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -715,20 +715,20 @@ describe('ReactHooks', () => {
715715

716716
const root1 = ReactTestRenderer.create(null);
717717
expect(() => root1.update(<App return={17} />)).toWarnDev([
718-
'Warning: An Effect function must not return anything besides a ' +
718+
'Warning: An effect function must not return anything besides a ' +
719719
'function, which is used for clean-up. You returned: 17',
720720
]);
721721

722722
const root2 = ReactTestRenderer.create(null);
723723
expect(() => root2.update(<App return={null} />)).toWarnDev([
724-
'Warning: An Effect function must not return anything besides a ' +
724+
'Warning: An effect function must not return anything besides a ' +
725725
'function, which is used for clean-up. You returned null. If your ' +
726726
'effect does not require clean up, return undefined (or nothing).',
727727
]);
728728

729729
const root3 = ReactTestRenderer.create(null);
730730
expect(() => root3.update(<App return={Promise.resolve()} />)).toWarnDev([
731-
'Warning: An Effect function must not return anything besides a ' +
731+
'Warning: An effect function must not return anything besides a ' +
732732
'function, which is used for clean-up.\n\n' +
733733
'It looks like you wrote useEffect(async () => ...) or returned a Promise.',
734734
]);

0 commit comments

Comments
 (0)