Skip to content

linter: react-hooks/exhaustive-deps false positive for member expressions inside IIFEs #19749

@Dennis273

Description

@Dennis273

What version of Oxlint are you using?

latest (main branch, commit 553e638)

What command did you run?

oxlint -c .oxlintrc.json

What does your .oxlintrc.json (or oxlint.config.ts) config file look like?

{
  "plugins": ["react"],
  "rules": {
    "react-hooks/exhaustive-deps": "warn"
  }
}

What happened?

When property reads like obj.a and obj.b occur inside an IIFE (Immediately Invoked Function Expression) within a hook callback, oxlint incorrectly reports obj as a missing dependency and obj.a / obj.b as unnecessary. ESLint's react-hooks/exhaustive-deps does not report any error for the same code.

Reproduction:

import { useMemo } from 'react';

function MyComponent({ obj, flag }: { obj: { a: string; b: string }; flag: boolean }) {
  return useMemo(() => {
    return (() => {
      return flag ? obj.a : obj.b;
    })();
  }, [obj.a, obj.b, flag]);
}

oxlint output:

⚠ React Hook useMemo has a missing dependency: 'obj'.
  Either include it or remove the dependency array.
⚠ React Hook useMemo has an unnecessary dependency: 'obj.a'.
  Either exclude it or remove the dependency array.
⚠ React Hook useMemo has an unnecessary dependency: 'obj.b'.
  Either exclude it or remove the dependency array.

Expected: No warnings. [obj.a, obj.b, flag] is the correct dependency array.

The same issue also applies to function expression IIFEs:

function MyComponent({ obj }) {
  return useMemo(() => {
    return (function() {
      return obj.a;
    })();
  }, [obj.a]);
}

Metadata

Metadata

Assignees

No one assigned

    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