Use same example code for async effect warning (#15118)
Dan Abramov committed
Mar 15, 2019 at 19:27 UTC
f0621fe232f31cb0fcd63992c3440ec1b4ce5813
3 files changed
+19
-27
packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+9
-13
@@ -4446,19 +4446,15 @@ const tests = {
4446
errors: [
4447
`Effect callbacks are synchronous to prevent race conditions. ` +
4448
`Put the async function inside:\n\n` +
4449
- `useEffect(() => {\n` +
4450
- ` let ignore = false;\n` +
4451
- ` fetchSomething();\n` +
4452
- `\n` +
4453
- ` async function fetchSomething() {\n` +
4454
- ` const result = await ...\n` +
4455
- ` if (!ignore) setState(result);\n` +
4456
- ` }\n` +
4457
- `\n` +
4458
- ` return () => { ignore = true; };\n` +
4459
- `}, ...);\n` +
4460
- `\n` +
4461
- `This lets you handle multiple requests without bugs.`,
4449
+ 'useEffect(() => {\n' +
4450
+ ' async function fetchData() {\n' +
4451
+ ' // You can await here\n' +
4452
+ ' const response = await MyAPI.getData(someId);\n' +
4453
+ ' // ...\n' +
4454
+ ' }\n' +
4455
+ ' fetchData();\n' +
4456
+ `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
4457
+ 'Learn more about data fetching with Hooks: https://fb.me/react-hooks-data-fetching',
4458
],
4459
},
4460
{
packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+9
-13
@@ -112,19 +112,15 @@ export default {
112
message:
113
`Effect callbacks are synchronous to prevent race conditions. ` +
114
`Put the async function inside:\n\n` +
115
- `useEffect(() => {\n` +
116
- ` let ignore = false;\n` +
117
- ` fetchSomething();\n` +
118
- `\n` +
119
- ` async function fetchSomething() {\n` +
120
- ` const result = await ...\n` +
121
- ` if (!ignore) setState(result);\n` +
122
- ` }\n` +
123
- `\n` +
124
- ` return () => { ignore = true; };\n` +
125
- `}, ...);\n` +
126
- `\n` +
127
- `This lets you handle multiple requests without bugs.`,
115
+ 'useEffect(() => {\n' +
116
+ ' async function fetchData() {\n' +
117
+ ' // You can await here\n' +
118
+ ' const response = await MyAPI.getData(someId);\n' +
119
+ ' // ...\n' +
120
+ ' }\n' +
121
+ ' fetchData();\n' +
122
+ `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
123
+ 'Learn more about data fetching with Hooks: https://fb.me/react-hooks-data-fetching',
124
});
125
}
126
packages/react-reconciler/src/ReactFiberCommitWork.js
+1
-1
@@ -358,7 +358,7 @@ function commitHookEffectList(
358
' // ...\n' +
359
' }\n' +
360
' fetchData();\n' +
361
- '}, [someId]);\n\n' +
361
+ `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
362
'Learn more about data fetching with Hooks: https://fb.me/react-hooks-data-fetching';
363
} else {
364
addendum = ' You returned: ' + destroy;