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

Priority

None yet

Effort

None yet

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions