Make useEffect(async) warning more verbose (#14327)
* Make useEffect(async) warning more verbose * Nit
Dan Abramov committed
Nov 27, 2018 at 13:05 UTC
f93f3402f7739f0f04b7b4e89bf2683230cc6a87
2 files changed
+13
-7
packages/react-reconciler/src/ReactFiberCommitWork.js
+11
-3
@@ -336,9 +336,17 @@ function commitHookEffectList(
336
'useEffect function must return a cleanup function or ' +
337
'nothing.%s%s',
338
typeof destroy.then === 'function'
339
- ? ' Promises and useEffect(async () => ...) are not ' +
340
- 'supported, but you can call an async function inside an ' +
341
- 'effect.'
339
+ ? '\n\nIt looks like you wrote useEffect(async () => ...) or returned a Promise. ' +
340
+ 'Instead, you may write an async function separately ' +
341
+ 'and then call it from inside the effect:\n\n' +
342
+ 'async function fetchComment(commentId) {\n' +
343
+ ' // You can await here\n' +
344
+ '}\n\n' +
345
+ 'useEffect(() => {\n' +
346
+ ' fetchComment(commentId);\n' +
347
+ '}, [commentId]);\n\n' +
348
+ 'In the future, React will provide a more idiomatic solution for data fetching ' +
349
+ "that doesn't involve writing effects manually."
350
: '',
351
getStackByFiberInDevAndProd(finishedWork),
352
);
packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
+2
-4
@@ -75,10 +75,8 @@ describe('ReactHooks', () => {
75
expect(() => {
76
root.update(<App return={Promise.resolve()} />);
77
}).toWarnDev([
78
- 'Warning: useEffect function must return a cleanup function or ' +
79
- 'nothing. Promises and useEffect(async () => ...) are not supported, ' +
80
- 'but you can call an async function inside an effect.\n' +
81
- ' in App (at **)',
78
+ 'Warning: useEffect function must return a cleanup function or nothing.\n\n' +
79
+ 'It looks like you wrote useEffect(async () => ...) or returned a Promise.',
80
]);
81
});
82