react-hooks/rule-suppression

React Compiler only optimizes code that follows the rules of React. If a component or a hook has a comment that turns off react-hooks/rules-of-hooks or react-hooks/exhaustive-deps, the compiler doesn't trust it and skips the whole function. You lose the optimization, and nothing else tells you.

An eslint-disable-next-line comment counts for the function it's in. An eslint-disable comment counts for every component and hook in the file. oxlint-disable comments and the names react/rules-of-hooks and react/exhaustive-deps count too.

This rule only reports with an oxlint config, as react/rule-suppression. With bunfig.toml or an ESLint config you can turn it on, but it reports nothing, same as in eslint-plugin-react-hooks.

{
  "plugins": ["react"],
  "rules": { "react/rule-suppression": "error" }
}

Examples#

Reported:

import { useEffect } from "react";

function Title({ text }) {
  useEffect(() => {
    document.title = text;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return <h1>{text}</h1>;
}

Not reported:

import { useEffect } from "react";

function Title({ text }) {
  useEffect(() => {
    document.title = text;
  }, [text]);
  return <h1>{text}</h1>;
}

Comments about other rules don't matter:

function Title({ text }) {
  // eslint-disable-next-line no-console
  console.log(text);
  return <h1>{text}</h1>;
}