[Compiler Bug]: eslint-plugin-react-hooks does not enable the new rule for the React compiler

[guillaumebrunerie]

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)
• [x] eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
• [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

n/a

Repro steps

I’m not sure if it’s on purpose, but installing [email protected] as described in https://react.dev/blog/2025/04/21/react-compiler-rc does not enable the rule from the React compiler, and I couldn’t find it documented anywhere how to enable it. It’s only after digging into the code that I found that the rule is called react-hooks/react-compiler.

I guess it should be enabled by default, maybe with instructions how to disable it?

How often does this bug happen?

Every time

What version of React are you using?

19.1.0

What version of React Compiler are you using?

19.1.0-rc.1

[controversial]

I found the same thing; the announcement says using the “recommended” config from the RC release of eslint-plugin-react-hooks will enable react-hooks/react-compiler, however it’s not enabled in the rules that are exported as part of configs.recommended: https://github.com/facebook/react/blob/620c838fb64c87c92691ff0fe83b320a7f50f617/packages/eslint-plugin-react-hooks/src/index.ts#L21-L24

[poteto]

Yeah sorry about that, you'll need to add 'react-hooks/react-compiler': 'error' to your config for now to opt-in. I'll put out another RC tomorrow morning with it on by default.

[BearCooder]

Hello @poteto is there another RC out? Because I still see only 6.0.0-rc.1

[laug]

@poteto I am still experiencing the same issue as of 6 June.

Spent quite some time trying to figure out why it wasn't working until I found this issue report. Could you please update the RC release blog post to mention this while the fix is being developed?

Thank you.

[BearCooder]

Have you tried the latest 6.1.0-canary?

But yeah it would be nice to get the 6.0.0-rc.1 updated since this one is mentioned in the blog, or even release the v6 officially if work is being done on v6.1.0 already

[laug]

@BearCooder thanks for the comment, I was on the RC version, not the canary. Actually I'm a bit reluctant to use a canary version on our production project so I have reverted back to v5 and we're keeping the separate compiler eslint plugin for now, as it achieves the same thing anyway. I just think the docs should be updated to not be misleading.

[CHC383]

The latest code https://github.com/facebook/react/blob/c38e26897848374c34ac6b651fce4a9088ed4dd0/packages/eslint-plugin-react-hooks/src/index.ts#L21-L24 still doesn't have the react-compiler rule in the recommended config yet

[BearCooder]

I just think the docs should be updated to not be misleading.

Fully agree. I just wanted to give you the hint. Lets hope we get an offical v6 release soon

[dohomi]

Not 100% sure what are now the right rules for linting?

Currently I use following setup:

import reactCompiler from "eslint-plugin-react-compiler";
import pluginQuery from "@tanstack/eslint-plugin-query";
import reactPlugin from "eslint-plugin-react"
import tseslint from "typescript-eslint";
import reactHooks from 'eslint-plugin-react-hooks';

export default [
  {
    settings: {
      react: {
        version: "detect"
      }
    }
  },
  ...tseslint.configs.recommended, // or `recommended` for non-type-aware
  reactPlugin.configs.flat.recommended,
  reactCompiler.configs.recommended,
  reactHooks.configs["recommended-latest"],
  ...pluginQuery.configs['flat/recommended']
];

[D3troit98]

This is my current setups. It works

` import js from "@eslint/js"; import globals from "globals"; import react from "eslint-plugin-react"; import reactRefresh from "eslint-plugin-react-refresh"; import pluginQuery from "@tanstack/eslint-plugin-query"; import reactHooks from "eslint-plugin-react-hooks";

export default [   ...pluginQuery.configs["flat/recommended"],   {     ignores: [       "node_modules",       "dist",       ".next",       ".env",       ".cache",       "components/ui",       "build",       "public/build",       "src/components/ui/",     ],   },   {     files: ["**/.{js,jsx,ts,tsx}"],     languageOptions: {       ecmaVersion: 2020,       globals: { ...globals.browser, ...globals.node, ...globals.es2025 },       parserOptions: { ecmaVersion: "latest", ecmaFeatures: { jsx: true }, sourceType: "module" },     },     settings: { react: { version: "19.2.0" } },     plugins: {       react,       "react-hooks": reactHooks,       "react-refresh": reactRefresh,     },     rules: {       ...js.configs.recommended.rules,       ...react.configs.recommended.rules,       ...react.configs["jsx-runtime"].rules,       ...reactHooks.configs.recommended.rules, // hooks + compiler (basic)       ...reactHooks.configs["recommended-latest"].rules, // hooks + compiler (full)

        "react-hooks/component-hook-factories": "warn",       "react-hooks/config": "warn",       "react-hooks/error-boundaries": "warn",       "react-hooks/gating": "warn",       "react-hooks/globals": "warn",       "react-hooks/immutability": "warn",       "react-hooks/incompatible-library": "warn",       "react-hooks/preserve-manual-memoization": "warn",       "react-hooks/purity": "warn",       "react-hooks/refs": "warn",       "react-hooks/set-state-in-effect": "warn",       "react-hooks/set-state-in-render": "warn",       "react-hooks/static-components": "warn",       "react-hooks/unsupported-syntax": "warn",       "react-hooks/use-memo": "warn",       "react/prop-types": "off",       "@typescript-eslint/no-explicit-any": "off",       "react/jsx-no-target-blank": "off",       "no-console": "warn",       "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],     },   }, ]; `