How to enable the react compiler lint rule?

[nandcello]

Summary

Trying out Next16 beta and I have reactCompiler option in my next config set to true. When run lint on my project (this is a fresh project btw) it still warns me of exhaustive deps rule when I don't wrap my function in a useCallback which I believe should be taken care of the react compiler.

Additional information

Tried to follow the React guide to enable the lint but to no avail.

also upon checking, i do have [email protected] installed via [email protected]

sample warning

warning  The 'updateSelectedFile' function makes the dependencies of useCallback Hook (at line 77) change on every render. To fix this, wrap the definition of 'updateSelectedFile' in its own useCallback() Hook  react-hooks/exhaustive-deps

[haroonmaqbool]

Hey @nandcello, this turns out the React Compiler doesn’t disable the exhaustive-deps rule automatically yet, even if you’ve set reactCompiler: true in your next.config.js. That rule still comes from eslint-plugin-react-hooks, so ESLint continues to warn about missing dependencies until React ships a compiler-aware lint integration. Your setup is fine; it’s just not fully wired up yet in the current Next 16 beta. For now, you can either leave the warning as-is or temporarily disable it in your .eslintrc file or inline comment if it clutters your output. The React team mentioned they’ll release updated lint rules once the compiler becomes stable, so keep an eye on the official React docs once that lands, these redundant warnings should disappear automatically.

[nandcello]

Hey @haroonmaqbool. Appreciate the reply but React Compiler is stable as of ReactConf. Which is also mentioned in the NextJS 16 beta blog. So I'm not sure why the the lint warnings are still showing up. I've only experienced this in Next16. I have other projects in vite and the lint rules are behaving correctly there.

[haroonmaqbool]

React Compiler is indeed stable now, but the ESLint integration still seems a bit behind in the current Next 16 beta builds. Even though the compiler itself is stable, eslint-config-next hasn’t been fully updated to include the new compiler-aware lint rules yet. That’s why you’re seeing correct behavior in Vite but not in Next Vite setups pull the latest React config directly, while Next still relies on its own ESLint layer. My guess is this will be fixed once the Next team syncs their ESLint package with the stable compiler setup. Until then, those warnings are just leftover from the older hook lint behavior.

[nandcello]

which is weird cause I ran the bun why eslint-plugin-react-hooks command and it's saying the eslint plugin hook is updated to the latest 7.0.0 (which is coming directly from eslint-config-next). So I was wondering if it's something I can just fix by an eslint.config modification while Next team works on fixing this issue in their eslint package.

[haroonmaqbool]

So modifying the config won’t really make a difference right now. The issue isn’t in your setup but in how the compiler rules are wired inside the current ESLint chain. For now, it’s safe to keep your setup as-is; the warnings are harmless and should go away once the Next team pushes an update to sync their ESLint package with the compiler rules.

[icyJoseph]

What package manager are you using?

[nandcello]

bun

I've also tried using pnpm with the same result.

[haroonmaqbool]

You technically could tweak your eslint.config to override the plugin manually.

[icyJoseph]

What is not working exactly? It works for me, but I get one error at a time 🤔

"use client";
import { useEffect, useRef, useState } from "react";

export default function Home(props: { a: string; b: string }) {
  const [c, setC] = useState("");

  setC(Math.random());
  const ref = useRef(0);
  useEffect(() => {
    setC(props.a + props.b);
  }, [props.a, props.b]);

  return (
    <pre>
      {c} - {ref.current}
    </pre>
  );
}

  7:8  error  Error: Cannot call impure function during render

`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).

   5 |   const [c, setC] = useState("");
   6 |
>  7 |   setC(Math.random());
     |        ^^^^^^^^^^^^^ Cannot call impure function
   8 |   const ref = useRef(0);
   9 |   useEffect(() => {
  10 |     setC(props.a + props.b);  react-hooks/purity

✖ 1 problem (1 error, 0 warnings)

❯ npx eslint .


  15:14  error  Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).


  13 |   return (
  14 |     <pre>
> 15 |       {c} - {ref.current}
     |              ^^^^^^^^^^^ Cannot access ref value during render
  16 |     </pre>
  17 |   );
  18 | }  react-hooks/refs

✖ 1 problem (1 error, 0 warnings)

   5 |   const [c, setC] = useState<string[]>([]);
   6 |
>  7 |   setC([]);
     |   ^^^^ Found setState() in render
   8 |   const ref = useRef(0);
   9 |   useEffect(() => {
  10 |     setC([props.a + props.b]);  react-hooks/set-state-in-render

I did use next@beta though - fresh create-next-app zero changes w/ npm.

[nandcello]

Yes I am using next@beta as well. What's not working is even if I have reactCompiler in next config set to true; I still get warning when running lint when I don't use useCallback. Which if I'm using react compiler then it shouldn't warn me about that.

[nandcello]

Okay I think I've finally gotten this to work @icyJoseph @haroonmaqbool; at least until Next team fixes the eslint-config-next package(?)

Here's my eslint.config.mjs

import reactHooks from "eslint-plugin-react-hooks";
//other imports..

const eslintConfig = [
  reactHooks.configs.flat["recommended-latest"],
  ...compat.config({
    extends: ["next/core-web-vitals", "next/typescript"],
    rules: {
      "react-hooks/exhaustive-deps": "off",
    },
  }),
  {
    ignores: [
      "node_modules/**",
      ".next/**",
      "out/**",
      "build/**",
      "next-env.d.ts",
      "convex/_generated/**",
    ],
  },
];

The key thing is the order of the items. If I decalre reactHooks after the compat.config line then I still get exhaustive deps warning when I lint despite react compiler being enabled in next config.

[haroonmaqbool]

Perfect @nandcello, the order in which reactHooks is applied definitely affects how the rules merge with compat.config.

[nandcello]

i don't understand it though as the opposite should be true according to eslint docs 🤷🏿

[haroonmaqbool]

Yeah, true but it’s probably because compat.config() merges rules in a slightly different order internally than what ESLint docs describe. Next’s layering might be overriding things earlier in the chain.