Skip to content

Commit

Permalink
react-hooks/exhaustive-deps: Handle optional chained methods as depen…
Browse files Browse the repository at this point in the history
…dency (#20204)
  • Loading branch information
AriPerkkio committed Dec 2, 2020
1 parent 148ffe3 commit 4f843be
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3593,6 +3593,36 @@ const tests = {
},
],
},
{
code: normalizeIndent`
function MyComponent(props) {
useEffect(() => {}, [props?.attribute.method()]);
}
`,
errors: [
{
message:
'React Hook useEffect has a complex expression in the dependency array. ' +
'Extract it to a separate variable so it can be statically checked.',
suggestions: undefined,
},
],
},
{
code: normalizeIndent`
function MyComponent(props) {
useEffect(() => {}, [props.method()]);
}
`,
errors: [
{
message:
'React Hook useEffect has a complex expression in the dependency array. ' +
'Extract it to a separate variable so it can be statically checked.',
suggestions: undefined,
},
],
},
{
code: normalizeIndent`
function MyComponent() {
Expand Down
5 changes: 5 additions & 0 deletions packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
Original file line number Diff line number Diff line change
Expand Up @@ -1643,6 +1643,11 @@ function analyzePropertyChain(node, optionalChains) {
return result;
} else if (node.type === 'ChainExpression' && !node.computed) {
const expression = node.expression;

if (expression.type === 'CallExpression') {
throw new Error(`Unsupported node type: ${expression.type}`);
}

const object = analyzePropertyChain(expression.object, optionalChains);
const property = analyzePropertyChain(expression.property, null);
const result = `${object}.${property}`;
Expand Down

0 comments on commit 4f843be

Please sign in to comment.