React Compiler

React 🔴 Senior

Définition

Compilateur de build (plugin Babel babel-plugin-react-compiler) stable en version 1.0 depuis le 7 octobre 2025. Il analyse le flux de données de chaque composant et hook et insère la mémoïsation automatiquement, rendant useMemo, useCallback et React.memo optionnels. Il cible React 19 mais supporte React 17 et 18 via react-compiler-runtime. Les composants qui violent les Rules of React sont simplement laissés non compilés.

Analogie

Un correcteur orthographique qui réécrit vos phrases lourdes à la volée, mais laisse tranquilles celles qu'il ne comprend pas.

Exemple de code

// npm i -D babel-plugin-react-compiler@latest eslint-plugin-react-hooks@latest
// babel.config.js — doit être le PREMIER plugin
module.exports = { plugins: ['babel-plugin-react-compiler'] };

// next.config.ts (Next.js 16 : option stable)
export default { reactCompiler: true };

// Exclure un composant problématique
function Legacy() {
  'use no memo';
  // ...
}
// Vérification : badge « Memo ✨ » dans React DevTools

Cas d'usage

Supprimer la mémoïsation manuelle d'une base de code et ses bugs de dépendances ; Meta rapporte jusqu'à 12 % de chargement initial en moins et des interactions 2,5× plus rapides.

Anti-pattern

Activer le compilateur sans tests de bout en bout ni respect des Rules of React : le lint eslint-plugin-react-hooks v6 doit être vert d'abord. Épingler la version exacte (--save-exact).

Termes liés

#tooling#performance#react19#interview

En entretien

Explique-moi ce que fait React Compiler et ce qu'il remplace.
C'est un plugin Babel stable en version 1.0 depuis le 7 octobre 2025 qui analyse le flux de données de chaque composant et hook pour insérer la mémoïsation automatiquement, rendant useMemo, useCallback et React.memo optionnels. Il cible React 19 mais reste compatible React 17/18 via react-compiler-runtime, et laisse simplement non compilés les composants qui violent les Rules of React.
Quels arbitrages tu ferais avant d'activer React Compiler en prod ?
Je m'assurerais d'abord que eslint-plugin-react-hooks v6 soit vert et que les tests passent, car l'activer sans respecter les Rules of React est risqué. J'épinglerais aussi la version exacte du plugin avec --save-exact plutôt que de suivre latest en continu.
Comment tu debuggerais un composant qui ne bénéficie pas de la mémoïsation du compilateur ?
Je vérifierais dans React DevTools le badge « Memo ✨ » pour voir si le composant est bien compilé. S'il ne l'est pas, c'est probablement qu'il viole les Rules of React, et j'utiliserais 'use no memo' pour l'exclure explicitement en attendant de corriger.

Dans l'actu

06/10 Toujours dans Next.js 16.4 : cache disque Turbopack réduit de 20-25 % (compression Zstandard), classes CSS Modules raccourcies en production, React 19.3 embarqué, et next upgrade --agent qui prépare guides de migration et codemods pour confier la montée de version à un agent de code. Semaine 41 (1re moitié) · 5 – 7 octobre 2026 →
03/08 Next.js 16.3 est publié : jusqu'à 90 % de RAM en moins en dev (éviction mémoire… Le React Compiler en Rust arrive en expérimental dans Turbopack. Bilan août 2026 →

Sources

Fiche mise à jour le 2026-09-27