maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Dan Abramov 2019-03-15 19:27:55 +00:00 committed by GitHub
parent ff4fb6d368
commit f0621fe232
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
View File

@ -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',
],
},
{

22
packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
View File

@ -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',
});
}

2
packages/react-reconciler/src/ReactFiberCommitWork.js vendored
View File

@ -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;