Revert "Feature: Add support to `exhaustive-deps` rule for any hook ending with `Effect` (#18580)" (#19004)
This reverts commit 5ac9ca72dfb73a06157bb177cd695f6b77fc900e.
Dan Abramov committed
May 26, 2020 at 16:08 UTC
bb2239dc90015ced86177adc522de568198e2edc
2 files changed
+8
-156
packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+7
-153
@@ -360,50 +360,32 @@ const tests = {
360
{
361
code: normalizeIndent`
362
function MyComponent(props) {
363
- useCustomHook(() => {
363
+ useCustomEffect(() => {
364
console.log(props.foo);
365
});
366
}
367
`,
368
- options: [{additionalHooks: 'useCustomHook'}],
369
- },
370
- {
371
- code: normalizeIndent`
372
- function MyComponent(props) {
373
- useCustomHook(() => {
374
- console.log(props.foo);
375
- }, [props.foo]);
376
- }
377
- `,
378
- options: [{additionalHooks: 'useCustomHook'}],
379
- },
380
- {
381
- code: normalizeIndent`
382
- function MyComponent(props) {
383
- useCustomHook(() => {
384
- console.log(props.foo);
385
- }, []);
386
- }
387
- `,
388
- options: [{additionalHooks: 'useAnotherHook'}],
368
+ options: [{additionalHooks: 'useCustomEffect'}],
369
},
370
{
371
code: normalizeIndent`
372
function MyComponent(props) {
373
useCustomEffect(() => {
374
console.log(props.foo);
395
- });
375
+ }, [props.foo]);
376
}
377
`,
378
+ options: [{additionalHooks: 'useCustomEffect'}],
379
},
380
{
381
code: normalizeIndent`
382
function MyComponent(props) {
383
useCustomEffect(() => {
384
console.log(props.foo);
404
- }, [props.foo]);
385
+ }, []);
386
}
387
`,
388
+ options: [{additionalHooks: 'useAnotherEffect'}],
389
},
390
{
391
code: normalizeIndent`
@@ -3070,105 +3052,6 @@ const tests = {
3052
},
3053
],
3054
},
3073
- {
3074
- code: normalizeIndent`
3075
- function MyComponent(props) {
3076
- useCustomHook(() => {
3077
- console.log(props.foo);
3078
- }, []);
3079
- useEffect(() => {
3080
- console.log(props.foo);
3081
- }, []);
3082
- React.useEffect(() => {
3083
- console.log(props.foo);
3084
- }, []);
3085
- React.useCustomHook(() => {
3086
- console.log(props.foo);
3087
- }, []);
3088
- }
3089
- `,
3090
- options: [{additionalHooks: 'useCustomHook'}],
3091
- errors: [
3092
- {
3093
- message:
3094
- "React Hook useCustomHook has a missing dependency: 'props.foo'. " +
3095
- 'Either include it or remove the dependency array.',
3096
- suggestions: [
3097
- {
3098
- desc: 'Update the dependencies array to be: [props.foo]',
3099
- output: normalizeIndent`
3100
- function MyComponent(props) {
3101
- useCustomHook(() => {
3102
- console.log(props.foo);
3103
- }, [props.foo]);
3104
- useEffect(() => {
3105
- console.log(props.foo);
3106
- }, []);
3107
- React.useEffect(() => {
3108
- console.log(props.foo);
3109
- }, []);
3110
- React.useCustomHook(() => {
3111
- console.log(props.foo);
3112
- }, []);
3113
- }
3114
- `,
3115
- },
3116
- ],
3117
- },
3118
- {
3119
- message:
3120
- "React Hook useEffect has a missing dependency: 'props.foo'. " +
3121
- 'Either include it or remove the dependency array.',
3122
- suggestions: [
3123
- {
3124
- desc: 'Update the dependencies array to be: [props.foo]',
3125
- output: normalizeIndent`
3126
- function MyComponent(props) {
3127
- useCustomHook(() => {
3128
- console.log(props.foo);
3129
- }, []);
3130
- useEffect(() => {
3131
- console.log(props.foo);
3132
- }, [props.foo]);
3133
- React.useEffect(() => {
3134
- console.log(props.foo);
3135
- }, []);
3136
- React.useCustomHook(() => {
3137
- console.log(props.foo);
3138
- }, []);
3139
- }
3140
- `,
3141
- },
3142
- ],
3143
- },
3144
- {
3145
- message:
3146
- "React Hook React.useEffect has a missing dependency: 'props.foo'. " +
3147
- 'Either include it or remove the dependency array.',
3148
- suggestions: [
3149
- {
3150
- desc: 'Update the dependencies array to be: [props.foo]',
3151
- output: normalizeIndent`
3152
- function MyComponent(props) {
3153
- useCustomHook(() => {
3154
- console.log(props.foo);
3155
- }, []);
3156
- useEffect(() => {
3157
- console.log(props.foo);
3158
- }, []);
3159
- React.useEffect(() => {
3160
- console.log(props.foo);
3161
- }, [props.foo]);
3162
- React.useCustomHook(() => {
3163
- console.log(props.foo);
3164
- }, []);
3165
- }
3166
- `,
3167
- },
3168
- ],
3169
- },
3170
- ],
3171
- },
3055
{
3056
code: normalizeIndent`
3057
function MyComponent(props) {
@@ -3186,6 +3069,7 @@ const tests = {
3069
}, []);
3070
}
3071
`,
3072
+ options: [{additionalHooks: 'useCustomEffect'}],
3073
errors: [
3074
{
3075
message:
@@ -4220,36 +4104,6 @@ const tests = {
4104
],
4105
options: [{additionalHooks: 'useLayoutEffect_SAFE_FOR_SSR'}],
4106
},
4223
- {
4224
- code: `
4225
- function MyComponent() {
4226
- const myRef = useRef();
4227
- useIsomorphicLayoutEffect(() => {
4228
- const handleMove = () => {};
4229
- myRef.current.addEventListener('mousemove', handleMove);
4230
- return () => myRef.current.removeEventListener('mousemove', handleMove);
4231
- });
4232
- return <div ref={myRef} />;
4233
- }
4234
- `,
4235
- output: `
4236
- function MyComponent() {
4237
- const myRef = useRef();
4238
- useIsomorphicLayoutEffect(() => {
4239
- const handleMove = () => {};
4240
- myRef.current.addEventListener('mousemove', handleMove);
4241
- return () => myRef.current.removeEventListener('mousemove', handleMove);
4242
- });
4243
- return <div ref={myRef} />;
4244
- }
4245
- `,
4246
- errors: [
4247
- `The ref value 'myRef.current' will likely have changed by the time ` +
4248
- `this effect cleanup function runs. If this ref points to a node ` +
4249
- `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +
4250
- `and use that variable in the cleanup function.`,
4251
- ],
4252
- },
4107
{
4108
// Autofix ignores constant primitives (leaving the ones that are there).
4109
code: normalizeIndent`
packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+1
-3
@@ -1510,9 +1510,7 @@ function getReactiveHookCallbackIndex(calleeNode, options) {
1510
// useImperativeHandle(ref, fn)
1511
return 1;
1512
default:
1513
- if (node === calleeNode && node.name.match(/^use.+Effect$/)) {
1514
- return 0;
1515
- } else if (node === calleeNode && options && options.additionalHooks) {
1513
+ if (node === calleeNode && options && options.additionalHooks) {
1514
// Allow the user to provide a regular expression which enables the lint to
1515
// target custom reactive hooks.
1516
let name;