From aea9284a1bd190b46b7ba47055d26b87a90918ae Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 15 Mar 2019 19:20:08 +0000
Subject: [PATCH] Use same example code for async effect warning

---
 .../ESLintRuleExhaustiveDeps-test.js          | 22 ++++++++-----------
 .../src/ExhaustiveDeps.js                     | 22 ++++++++-----------
 .../src/ReactFiberCommitWork.js               |  2 +-
 3 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
index b6f2fb6337228..575577f3b37d3 100644
--- 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
index 39f349b07beb2..5951d54b9e34b 100644
--- 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
index 686df39376623..544dccfd449a9 100644
--- 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;