Improve async useEffect warning (#15104)

gaearon · web-flow · commit 9d77a317bf5b · 2019-03-13T16:20:13.000Z
diff --git 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
@@ -715,20 +715,20 @@ describe('ReactHooks', () => {
 
     const root1 = ReactTestRenderer.create(null);
     expect(() => root1.update(<App return={17} />)).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(<App return={null} />)).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(<App return={Promise.resolve()} />)).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.',
     ]);
