Use same example code for async effect warning (#15118)

facebook · Mar 15, 2019 · f0621fe · f0621fe
1 parent ff4fb6d
commit f0621fe
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 27 deletions.
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
@@ -4446,19 +4446,15 @@ const tests = {
       errors: [
         `Effect callbacks are synchronous to prevent race conditions. ` +
           `Put the async function inside:\n\n` +
-          `useEffect(() => {\n` +
-          `  let ignore = false;\n` +
-          `  fetchSomething();\n` +
-          `\n` +
-          `  async function fetchSomething() {\n` +
-          `    const result = await ...\n` +
-          `    if (!ignore) setState(result);\n` +
-          `  }\n` +
-          `\n` +
-          `  return () => { ignore = true; };\n` +
-          `}, ...);\n` +
-          `\n` +
-          `This lets you handle multiple requests without bugs.`,
+          'useEffect(() => {\n' +
+          '  async function fetchData() {\n' +
+          '    // You can await here\n' +
+          '    const response = await MyAPI.getData(someId);\n' +
+          '    // ...\n' +
+          '  }\n' +
+          '  fetchData();\n' +
+          `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
+          'Learn more about data fetching with Hooks: https://fb.me/react-hooks-data-fetching',
       ],
     },
     {

diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -112,19 +112,15 @@ export default {
           message:
             `Effect callbacks are synchronous to prevent race conditions. ` +
             `Put the async function inside:\n\n` +
-            `useEffect(() => {\n` +
-            `  let ignore = false;\n` +
-            `  fetchSomething();\n` +
-            `\n` +
-            `  async function fetchSomething() {\n` +
-            `    const result = await ...\n` +
-            `    if (!ignore) setState(result);\n` +
-            `  }\n` +
-            `\n` +
-            `  return () => { ignore = true; };\n` +
-            `}, ...);\n` +
-            `\n` +
-            `This lets you handle multiple requests without bugs.`,
+            'useEffect(() => {\n' +
+            '  async function fetchData() {\n' +
+            '    // You can await here\n' +
+            '    const response = await MyAPI.getData(someId);\n' +
+            '    // ...\n' +
+            '  }\n' +
+            '  fetchData();\n' +
+            `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
+            'Learn more about data fetching with Hooks: https://fb.me/react-hooks-data-fetching',
         });
       }
 

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
@@ -358,7 +358,7 @@ function commitHookEffectList(
                 '    // ...\n' +
                 '  }\n' +
                 '  fetchData();\n' +
-                '}, [someId]);\n\n' +
+                `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
                 'Learn more about data fetching with Hooks: https://fb.me/react-hooks-data-fetching';
             } else {
               addendum = ' You returned: ' + destroy;