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

Revert "Feature: Add support to `exhaustive-deps` rule for any hook ending with `Effect` (#18580)" (#19004) 

This reverts commit 5ac9ca72df.
This commit is contained in:
Dan Abramov 2020-05-26 16:08:50 +01:00 committed by GitHub
parent 03e6b8ba2f
commit bb2239dc90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -360,50 +360,32 @@ const tests = {
{
code: normalizeIndent`
function MyComponent(props) {
useCustomHook(() => {
useCustomEffect(() => {
console.log(props.foo);
});
}
`,
options: [{additionalHooks: 'useCustomHook'}],
options: [{additionalHooks: 'useCustomEffect'}],
},
{
code: normalizeIndent`
function MyComponent(props) {
useCustomHook(() => {
useCustomEffect(() => {
console.log(props.foo);
}, [props.foo]);
}
`,
options: [{additionalHooks: 'useCustomHook'}],
options: [{additionalHooks: 'useCustomEffect'}],
},
{
code: normalizeIndent`
function MyComponent(props) {
useCustomHook(() => {
useCustomEffect(() => {
console.log(props.foo);
}, []);
}
`,
options: [{additionalHooks: 'useAnotherHook'}],
},
{
code: normalizeIndent`
function MyComponent(props) {
useCustomEffect(() => {
console.log(props.foo);
});
}
`,
},
{
code: normalizeIndent`
function MyComponent(props) {
useCustomEffect(() => {
console.log(props.foo);
}, [props.foo]);
}
`,
options: [{additionalHooks: 'useAnotherEffect'}],
},
{
code: normalizeIndent`
@ -3070,105 +3052,6 @@ const tests = {
},
],
},
{
code: normalizeIndent`
function MyComponent(props) {
useCustomHook(() => {
console.log(props.foo);
}, []);
useEffect(() => {
console.log(props.foo);
}, []);
React.useEffect(() => {
console.log(props.foo);
}, []);
React.useCustomHook(() => {
console.log(props.foo);
}, []);
}
`,
options: [{additionalHooks: 'useCustomHook'}],
errors: [
{
message:
"React Hook useCustomHook has a missing dependency: 'props.foo'. " +
'Either include it or remove the dependency array.',
suggestions: [
{
desc: 'Update the dependencies array to be: [props.foo]',
output: normalizeIndent`
function MyComponent(props) {
useCustomHook(() => {
console.log(props.foo);
}, [props.foo]);
useEffect(() => {
console.log(props.foo);
}, []);
React.useEffect(() => {
console.log(props.foo);
}, []);
React.useCustomHook(() => {
console.log(props.foo);
}, []);
}
`,
},
],
},
{
message:
"React Hook useEffect has a missing dependency: 'props.foo'. " +
'Either include it or remove the dependency array.',
suggestions: [
{
desc: 'Update the dependencies array to be: [props.foo]',
output: normalizeIndent`
function MyComponent(props) {
useCustomHook(() => {
console.log(props.foo);
}, []);
useEffect(() => {
console.log(props.foo);
}, [props.foo]);
React.useEffect(() => {
console.log(props.foo);
}, []);
React.useCustomHook(() => {
console.log(props.foo);
}, []);
}
`,
},
],
},
{
message:
"React Hook React.useEffect has a missing dependency: 'props.foo'. " +
'Either include it or remove the dependency array.',
suggestions: [
{
desc: 'Update the dependencies array to be: [props.foo]',
output: normalizeIndent`
function MyComponent(props) {
useCustomHook(() => {
console.log(props.foo);
}, []);
useEffect(() => {
console.log(props.foo);
}, []);
React.useEffect(() => {
console.log(props.foo);
}, [props.foo]);
React.useCustomHook(() => {
console.log(props.foo);
}, []);
}
`,
},
],
},
],
},
{
code: normalizeIndent`
function MyComponent(props) {
@ -3186,6 +3069,7 @@ const tests = {
}, []);
}
`,
options: [{additionalHooks: 'useCustomEffect'}],
errors: [
{
message:
@ -4220,36 +4104,6 @@ const tests = {
],
options: [{additionalHooks: 'useLayoutEffect_SAFE_FOR_SSR'}],
},
{
code: `
function MyComponent() {
const myRef = useRef();
useIsomorphicLayoutEffect(() => {
const handleMove = () => {};
myRef.current.addEventListener('mousemove', handleMove);
return () => myRef.current.removeEventListener('mousemove', handleMove);
});
return <div ref={myRef} />;
}
`,
output: `
function MyComponent() {
const myRef = useRef();
useIsomorphicLayoutEffect(() => {
const handleMove = () => {};
myRef.current.addEventListener('mousemove', handleMove);
return () => myRef.current.removeEventListener('mousemove', handleMove);
});
return <div ref={myRef} />;
}
`,
errors: [
`The ref value 'myRef.current' will likely have changed by the time ` +
`this effect cleanup function runs. If this ref points to a node ` +
`rendered by React, copy 'myRef.current' to a variable inside the effect, ` +
`and use that variable in the cleanup function.`,
],
},
{
// Autofix ignores constant primitives (leaving the ones that are there).
code: normalizeIndent`

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

@ -1510,9 +1510,7 @@ function getReactiveHookCallbackIndex(calleeNode, options) {
// useImperativeHandle(ref, fn)
return 1;
default:
if (node === calleeNode && node.name.match(/^use.+Effect$/)) {
return 0;
} else if (node === calleeNode && options && options.additionalHooks) {
if (node === calleeNode && options && options.additionalHooks) {
// Allow the user to provide a regular expression which enables the lint to
// target custom reactive hooks.
let name;