eslint-plugin-react-hooks v6 (Rules of React)

Définition

Depuis React 19.2 (1er octobre 2025), eslint-plugin-react-hooks v6 utilise la flat config par défaut et embarque des règles issues du compilateur : set-state-in-render (boucles de rendu), set-state-in-effect (travail coûteux dans un effet), refs (lecture de ref pendant le rendu), en plus de rules-of-hooks et exhaustive-deps. Ces règles encodent les Rules of React que le compilateur exige.

Analogie

Le contrôle technique avant la course : la voiture (le compilateur) ne part que si les voyants sont éteints.

Exemple de code

// eslint.config.js (flat config)
import reactHooks from 'eslint-plugin-react-hooks';
export default [
  reactHooks.configs.flat.recommended,
];

// Exemple d'erreur détectée : set-state-in-render
function Counter({ start }) {
  const [n, setN] = useState(0);
  if (n < start) setN(start); // ❌ setState pendant le rendu => boucle
  return <p>{n}</p>;
}

Cas d'usage

Préparer une base de code à React Compiler et attraper les bugs de pureté avant la production.

Anti-pattern

Termes liés

Sources

• react.dev/blog/2025/10/01/react-19-2
• react.dev/blog/2025/10/07/react-compiler-1