diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js index 1b6e84d8893e7..d7af4c50545a4 100644 --- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js +++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js @@ -584,6 +584,16 @@ const tests = { } `, }, + { + code: normalizeIndent` + function MyComponent(props) { + let foo = {} + useEffect(() => { + foo.bar.baz = 43; + }, [foo.bar]); + } + `, + }, { // Valid because we assign ref.current // ourselves. Therefore it's likely not @@ -6395,6 +6405,39 @@ const tests = { // Keep this until major IDEs and VS Code FB ESLint plugin support Suggestions API. options: [{enableDangerousAutofixThisMayCauseInfiniteLoops: true}], }, + { + code: normalizeIndent` + function MyComponent(props) { + let foo = {} + useEffect(() => { + foo.bar.baz = 43; + props.foo.bar.baz = 1; + }, []); + } + `, + errors: [ + { + message: + "React Hook useEffect has missing dependencies: 'foo.bar' and 'props.foo.bar'. " + + 'Either include them or remove the dependency array.', + suggestions: [ + { + desc: + 'Update the dependencies array to be: [foo.bar, props.foo.bar]', + output: normalizeIndent` + function MyComponent(props) { + let foo = {} + useEffect(() => { + foo.bar.baz = 43; + props.foo.bar.baz = 1; + }, [foo.bar, props.foo.bar]); + } + `, + }, + ], + }, + ], + }, ], }; diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js index 08cc1128f156b..ddc1289cddb1e 100644 --- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js +++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js @@ -1437,6 +1437,12 @@ function getDependency(node) { ) ) { return getDependency(node.parent); + } else if ( + node.type === 'MemberExpression' && + node.parent && + node.parent.type === 'AssignmentExpression' + ) { + return node.object; } else { return node; }