Skip to content

[Compiler Bug]: eslint-plugin-react-hooks 7.1.0 skips linting components defined with in-line memo and forwardRef wrappers #36432

@michaeljaltamirano

Description

@michaeljaltamirano

What kind of issue is this?

  • React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
  • babel-plugin-react-compiler (build issue installing or using the Babel plugin)
  • eslint-plugin-react-hooks (build issue installing or using the eslint plugin)
  • react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://github.com/michaeljaltamirano/eslint-plugin-react-hooks-issue

Repro steps

Hi Team,

First and foremost, thank you for eslint-plugin-react-hooks, and continued development on making it more performant + more accurately surfacing violations.

I noticed while upgrading a large repo from 7.0.1 to 7.1.1 that there were some regressions in reported rules, identified by ESLint v9 settings that error on unreported rules. While looking at the full diff, I realized the root cause was pretty straight-forward: any component with an in-lined React.memo, memo, or forwardRef wrapper around the component variable declaration would suppress reporting, due to the skip compilation changes added in 7.1.0: #35589

Here are two screenshots that succinctly illustrate the issue:

Image Image

Expected behavior: component reports react-hooks lint violations regardless of definition syntax, and so Screenshot 2 should show the same errors as Screenshot 1.

Reproducible behavior: component definitions that in-line memo or forwardRef, e.g. export const SomeComponent = memo(function SomeComponent({}), skip react-hooks linting, which is why Screenshot 2 does not show lint errors.

A temporary work-around of moving the in-lined wrapper functions away from the component definition , e.g. export default memo(SomeComponent), is sufficient to resolve the issue, but can result in noisy diffs where there are large indentation changes.

I have added a repro repo here: https://github.com/michaeljaltamirano/eslint-plugin-react-hooks-issue. The README and source is AI-generated, but it matches the manual regression testing I performed in a private repo. This issue is limited to eslint-plugin-react-hooks: react itself still reports all 4 cases as a compiler violation (here is a Compiler Playground link that shows as much).

I will be opening a PR based on https://github.com/michaeljaltamirano/react/tree/fix/memo-heuristic-variable-declaration, which was also AI generated. I read through https://legacy.reactjs.org/docs/how-to-contribute.html and ran the relevant yarn scripts to double-check unintended regressions.

How often does this bug happen?

Every time

What version of React are you using?

19.2.6

What version of React Compiler are you using?

1.0.0

What version of eslint-plugin-react-hooks are you using?

7.1.0. The regression does not exist in 7.0.1.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bugType: Bug

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions