Skip to content

linter: react-hooks/exhaustive-deps does not handle TS non-null operators in static property chains #11683

@DonIsaac

Description

@DonIsaac

What version of Oxlint are you using?

HEAD

What command did you run?

No response

What does your .oxlintrc.json config file look like?

n/a

What happened?

To reproduce, add this TS snippet to the pass vec in exhaustive_deps.rs

TS code:

function MyComponent(props) {
  useEffect(() => {
    console.log(props.foo!.bar)
  }, [props.foo!.bar])
}

You'll see this from cargo test

thread 'rules::react::exhaustive_deps::test' panicked at crates/oxc_linter/src/tester.rs:429:13:
expected test to pass, but it failed:

-------- source --------


          function MyComponent(props) {
            useEffect(() => {
              console.log(props.foo!.bar)
            }, [props.foo!.bar])
          }
        

-------- error --------

  ⚠ eslint-plugin-react-hooks(exhaustive-deps): React Hook useEffect has a complex expression in the dependency array.
   ╭─[exhaustive_deps.tsx:5:17]
 4 │               console.log(props.foo!.bar)
 5 │             }, [props.foo!.bar])
   ·                 ──────────────
 6 │           }
   ╰────
  help: Extract the expression to a separate variable so it can be statically checked.

  ⚠ eslint-plugin-react-hooks(exhaustive-deps): React Hook useEffect has a missing dependency: 'props.foo'
   ╭─[exhaustive_deps.tsx:5:16]
 4 │               console.log(props.foo!.bar)
 5 │             }, [props.foo!.bar])
   ·                ────────────────
 6 │           }
   ╰────
  help: Either include it or remove the dependency array.

Metadata

Metadata

Assignees

Labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions