Skip to content

Conversation

@yanneves
Copy link
Contributor

@yanneves yanneves commented May 26, 2020

Relates to #18985

Summary

In conditions where optional chaining is used inside the useEffect hook, the react-hooks/exhaustive-deps rule falsely flags missing dependencies. This change adds some logic to the linting rules to also match dependencies with optional chaining.

Test Plan

Have added tests to cover the following valid scenarios that were previously failing:

// Nullish coalescing
function MyComponent(props) {
  useEffect(() => {
    console.log(props.foo?.bar?.baz ?? null);
  }, [props.foo]);
}
// Optional chaining
function MyComponent(props) {
  useEffect(() => {
    console.log(props.foo?.bar);
  }, [props.foo?.bar]);
}
// Normal and optional chaining
function MyComponent(props) {
  useEffect(() => {
    console.log(props.foo);
    console.log(props.foo?.bar);
  }, [props.foo]);
}
// Optional chaining with prototype method
function MyComponent(props) {
  useEffect(() => {
    console.log(props.foo?.toString());
  }, [props.foo]);
}

@codesandbox-ci
Copy link

codesandbox-ci bot commented May 26, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6faded2:

Sandbox Source
vigilant-mcclintock-rmoly Configuration

@sizebot
Copy link

sizebot commented May 26, 2020

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against 6faded2

@sizebot
Copy link

sizebot commented May 26, 2020

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against 6faded2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants