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).
#tooling#performance#react19#interview

Fiche mise à jour le 2026-09-27

← → au clavier pour passer d'une fiche à l'autre