Make useEffect(async) warning more verbose (facebook#14327)

* Make useEffect(async) warning more verbose * Nit
zacharykapank · Nov 27, 2018 · f93f340 · f93f340
1 parent ee3ef3a
commit f93f340
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git 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
@@ -75,10 +75,8 @@ describe('ReactHooks', () => {
     expect(() => {
       root.update(<App return={Promise.resolve()} />);
     }).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.',
     ]);
   });