Skip to content

Commit da54641

Browse files
gaearongaearon
authored
[ESLint] Check deps when callback body is outside the Hook call, too (#18435)
* Refactor: visit CallExpression Instead of visiting the functions and looking up to see if they're in a Hook call, visit Hook calls and look down to see if there's a callback inside. I will need this refactor so I can visit functions declared outside the call. * Check deps when callback body is outside the Hook call * Handle the unknown case
1 parent bf30e37 commit da54641

File tree

2 files changed

+462
-28
lines changed

2 files changed

+462
-28
lines changed

‎packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js

+338
Original file line numberDiff line numberDiff line change
@@ -259,6 +259,104 @@ const tests = {
259259
}
260260
`,
261261
},
262+
{
263+
code: normalizeIndent`
264+
function MyComponent() {
265+
const myEffect = () => {
266+
// Doesn't use anything
267+
};
268+
useEffect(myEffect, []);
269+
}
270+
`,
271+
},
272+
{
273+
code: normalizeIndent`
274+
const local = {};
275+
function MyComponent() {
276+
const myEffect = () => {
277+
console.log(local);
278+
};
279+
useEffect(myEffect, []);
280+
}
281+
`,
282+
},
283+
{
284+
code: normalizeIndent`
285+
const local = {};
286+
function MyComponent() {
287+
function myEffect() {
288+
console.log(local);
289+
}
290+
useEffect(myEffect, []);
291+
}
292+
`,
293+
},
294+
{
295+
code: normalizeIndent`
296+
function MyComponent() {
297+
const local = {};
298+
function myEffect() {
299+
console.log(local);
300+
}
301+
useEffect(myEffect, [local]);
302+
}
303+
`,
304+
},
305+
{
306+
code: normalizeIndent`
307+
function MyComponent() {
308+
function myEffect() {
309+
console.log(global);
310+
}
311+
useEffect(myEffect, []);
312+
}
313+
`,
314+
},
315+
{
316+
code: normalizeIndent`
317+
const local = {};
318+
function MyComponent() {
319+
const myEffect = () => {
320+
otherThing()
321+
}
322+
const otherThing = () => {
323+
console.log(local);
324+
}
325+
useEffect(myEffect, []);
326+
}
327+
`,
328+
},
329+
{
330+
// Valid because even though we don't inspect the function itself,
331+
// at least it's passed as a dependency.
332+
code: normalizeIndent`
333+
function MyComponent({delay}) {
334+
const local = {};
335+
const myEffect = debounce(() => {
336+
console.log(local);
337+
}, delay);
338+
useEffect(myEffect, [myEffect]);
339+
}
340+
`,
341+
},
342+
{
343+
code: normalizeIndent`
344+
let local = {};
345+
function myEffect() {
346+
console.log(local);
347+
}
348+
function MyComponent() {
349+
useEffect(myEffect, []);
350+
}
351+
`,
352+
},
353+
{
354+
code: normalizeIndent`
355+
function MyComponent({myEffect}) {
356+
useEffect(myEffect, [myEffect]);
357+
}
358+
`,
359+
},
262360
{
263361
code: normalizeIndent`
264362
function MyComponent(props) {
@@ -5998,6 +6096,246 @@ const tests = {
59986096
},
59996097
],
60006098
},
6099+
{
6100+
code: normalizeIndent`
6101+
function MyComponent() {
6102+
const local = {};
6103+
function myEffect() {
6104+
console.log(local);
6105+
}
6106+
useEffect(myEffect, []);
6107+
}
6108+
`,
6109+
errors: [
6110+
{
6111+
message:
6112+
"React Hook useEffect has a missing dependency: 'local'. " +
6113+
'Either include it or remove the dependency array.',
6114+
suggestions: [
6115+
{
6116+
desc: 'Update the dependencies array to be: [local]',
6117+
output: normalizeIndent`
6118+
function MyComponent() {
6119+
const local = {};
6120+
function myEffect() {
6121+
console.log(local);
6122+
}
6123+
useEffect(myEffect, [local]);
6124+
}
6125+
`,
6126+
},
6127+
],
6128+
},
6129+
],
6130+
},
6131+
{
6132+
code: normalizeIndent`
6133+
function MyComponent() {
6134+
const local = {};
6135+
const myEffect = () => {
6136+
console.log(local);
6137+
};
6138+
useEffect(myEffect, []);
6139+
}
6140+
`,
6141+
errors: [
6142+
{
6143+
message:
6144+
"React Hook useEffect has a missing dependency: 'local'. " +
6145+
'Either include it or remove the dependency array.',
6146+
suggestions: [
6147+
{
6148+
desc: 'Update the dependencies array to be: [local]',
6149+
output: normalizeIndent`
6150+
function MyComponent() {
6151+
const local = {};
6152+
const myEffect = () => {
6153+
console.log(local);
6154+
};
6155+
useEffect(myEffect, [local]);
6156+
}
6157+
`,
6158+
},
6159+
],
6160+
},
6161+
],
6162+
},
6163+
{
6164+
code: normalizeIndent`
6165+
function MyComponent() {
6166+
const local = {};
6167+
const myEffect = function() {
6168+
console.log(local);
6169+
};
6170+
useEffect(myEffect, []);
6171+
}
6172+
`,
6173+
errors: [
6174+
{
6175+
message:
6176+
"React Hook useEffect has a missing dependency: 'local'. " +
6177+
'Either include it or remove the dependency array.',
6178+
suggestions: [
6179+
{
6180+
desc: 'Update the dependencies array to be: [local]',
6181+
output: normalizeIndent`
6182+
function MyComponent() {
6183+
const local = {};
6184+
const myEffect = function() {
6185+
console.log(local);
6186+
};
6187+
useEffect(myEffect, [local]);
6188+
}
6189+
`,
6190+
},
6191+
],
6192+
},
6193+
],
6194+
},
6195+
{
6196+
code: normalizeIndent`
6197+
function MyComponent() {
6198+
const local = {};
6199+
const myEffect = () => {
6200+
otherThing();
6201+
};
6202+
const otherThing = () => {
6203+
console.log(local);
6204+
};
6205+
useEffect(myEffect, []);
6206+
}
6207+
`,
6208+
errors: [
6209+
{
6210+
message:
6211+
"React Hook useEffect has a missing dependency: 'otherThing'. " +
6212+
'Either include it or remove the dependency array.',
6213+
suggestions: [
6214+
{
6215+
desc: 'Update the dependencies array to be: [otherThing]',
6216+
output: normalizeIndent`
6217+
function MyComponent() {
6218+
const local = {};
6219+
const myEffect = () => {
6220+
otherThing();
6221+
};
6222+
const otherThing = () => {
6223+
console.log(local);
6224+
};
6225+
useEffect(myEffect, [otherThing]);
6226+
}
6227+
`,
6228+
},
6229+
],
6230+
},
6231+
],
6232+
},
6233+
{
6234+
code: normalizeIndent`
6235+
function MyComponent() {
6236+
const local = {};
6237+
const myEffect = debounce(() => {
6238+
console.log(local);
6239+
}, delay);
6240+
useEffect(myEffect, []);
6241+
}
6242+
`,
6243+
errors: [
6244+
{
6245+
message:
6246+
"React Hook useEffect has a missing dependency: 'myEffect'. " +
6247+
'Either include it or remove the dependency array.',
6248+
suggestions: [
6249+
{
6250+
desc: 'Update the dependencies array to be: [myEffect]',
6251+
output: normalizeIndent`
6252+
function MyComponent() {
6253+
const local = {};
6254+
const myEffect = debounce(() => {
6255+
console.log(local);
6256+
}, delay);
6257+
useEffect(myEffect, [myEffect]);
6258+
}
6259+
`,
6260+
},
6261+
],
6262+
},
6263+
],
6264+
},
6265+
{
6266+
code: normalizeIndent`
6267+
function MyComponent() {
6268+
const local = {};
6269+
const myEffect = debounce(() => {
6270+
console.log(local);
6271+
}, delay);
6272+
useEffect(myEffect, [local]);
6273+
}
6274+
`,
6275+
errors: [
6276+
{
6277+
message:
6278+
"React Hook useEffect has a missing dependency: 'myEffect'. " +
6279+
'Either include it or remove the dependency array.',
6280+
suggestions: [
6281+
{
6282+
desc: 'Update the dependencies array to be: [myEffect]',
6283+
output: normalizeIndent`
6284+
function MyComponent() {
6285+
const local = {};
6286+
const myEffect = debounce(() => {
6287+
console.log(local);
6288+
}, delay);
6289+
useEffect(myEffect, [myEffect]);
6290+
}
6291+
`,
6292+
},
6293+
],
6294+
},
6295+
],
6296+
},
6297+
{
6298+
code: normalizeIndent`
6299+
function MyComponent({myEffect}) {
6300+
useEffect(myEffect, []);
6301+
}
6302+
`,
6303+
errors: [
6304+
{
6305+
message:
6306+
"React Hook useEffect has a missing dependency: 'myEffect'. " +
6307+
'Either include it or remove the dependency array.',
6308+
suggestions: [
6309+
{
6310+
desc: 'Update the dependencies array to be: [myEffect]',
6311+
output: normalizeIndent`
6312+
function MyComponent({myEffect}) {
6313+
useEffect(myEffect, [myEffect]);
6314+
}
6315+
`,
6316+
},
6317+
],
6318+
},
6319+
],
6320+
},
6321+
{
6322+
code: normalizeIndent`
6323+
function MyComponent() {
6324+
const local = {};
6325+
useEffect(debounce(() => {
6326+
console.log(local);
6327+
}, delay), []);
6328+
}
6329+
`,
6330+
errors: [
6331+
{
6332+
message:
6333+
'React Hook useEffect received a function whose dependencies ' +
6334+
'are unknown. Pass an inline function instead.',
6335+
suggestions: [],
6336+
},
6337+
],
6338+
},
60016339
],
60026340
};
60036341

0 commit comments

Comments
 (0)