React Compiler 1.0 : guide de mémoïsation auto

Pendant une décennie, rendre React rapide signifiait parsemer useMemo, useCallback et React.memo à la main dans vos composants. Un travail fastidieux, facile à rater, et impossible à appliquer là où il comptait le plus. React Compiler 1.0 inverse la valeur par défaut : le compilateur lit votre code et ajoute la bonne mémoïsation à votre place, à la compilation.

Ce guide couvre ce que fait réellement React Compiler 1.0, comment l'installer dans Vite et Next.js, les options de configuration qui comptent, et comment l'adopter sur une base de code existante sans rien casser.

Le problème que la mémoïsation manuelle n'a jamais résolu

React refait le rendu d'un composant dès que son état ou ses props changent. Par défaut, il refait aussi le rendu de tout le sous-arbre en dessous. Pour stopper le travail gaspillé, les développeurs recourent à trois outils :

useMemo pour mettre en cache une valeur calculée coûteuse
useCallback pour garder une référence de fonction stable entre les rendus
React.memo pour éviter de refaire le rendu d'un enfant quand ses props sont inchangées

Le motif fonctionne, mais il a un coût réel. Vous devez maintenir les tableaux de dépendances à la main, et une dépendance manquante ou périmée est une source classique de bugs. Vous polluez la logique métier de bruit d'optimisation. Pire encore, vous ne pouvez pas mémoïser après un return conditionnel — les Règles des Hooks interdisent d'appeler useMemo après un retour anticipé, là précisément où réside souvent le travail coûteux.

React Compiler supprime les approximations. Il analyse le flux de données et la mutabilité de chaque composant, puis insère la mémoïsation automatiquement — y compris là où un humain ne le peut pas : après un retour anticipé, dans les chaînes optionnelles et lors d'un accès par index de tableau.

Ce que livre React Compiler 1.0

La version 1.0, stabilisée après des années d'épreuves chez Meta, est la première mouture stable. Les chiffres phares du déploiement en production de Meta :

Chargements initiaux et navigations inter-pages jusqu'à 12 pour cent plus rapides
Interactions spécifiques jusqu'à 2,5 fois plus rapides
Consommation mémoire qui reste neutre

Au-delà de la vitesse brute, la 1.0 apporte trois choses essentielles pour l'adoption. Elle fait désormais partie des gabarits create-vite, create-next-app et create-expo-app, si bien que les nouveaux projets démarrent optimisés. Ses règles de lint sont livrées dans eslint-plugin-react-hooks, codifiant les Règles de React et attrapant des bugs comme l'appel de setState pendant le rendu. Et un chemin expérimental via un plugin SWC pour Next.js garde les builds rapides sans le pipeline Babel complet.

Installation dans un projet Vite

React Compiler s'exécute comme un plugin Babel. Installez-le en dépendance de développement à version exacte — épingler la version est recommandé tant que votre couverture de tests n'est pas solide, car retirer ou modifier la mémoïsation peut altérer subtilement la sortie.

pnpm add -D babel-plugin-react-compiler@latest

Avec @vitejs/plugin-react version 6 ou ultérieure, branchez-le via le preset du compilateur :

// vite.config.js
import { defineConfig } from 'vite';
import react, { reactCompilerPreset } from '@vitejs/plugin-react';
import babel from '@rolldown/plugin-babel';
 
export default defineConfig({
  plugins: [
    react(),
    babel({
      presets: [reactCompilerPreset()],
    }),
  ],
});

Si vous configurez Babel directement, le plugin du compilateur doit s'exécuter en premier dans la liste des plugins :

// babel.config.js
module.exports = {
  plugins: [
    'babel-plugin-react-compiler', // doit s'exécuter en premier
    // ...autres plugins
  ],
};

Installation dans Next.js

Next.js enveloppe le compilateur dans une optimisation SWC sur mesure qui ne l'applique qu'aux fichiers contenant du JSX ou des Hooks, gardant ainsi les builds rapides. Depuis Next.js 16, l'option est un drapeau de configuration de premier niveau. Installez le plugin Babel, puis activez-le :

npm install -D babel-plugin-react-compiler

// next.config.ts
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  reactCompiler: true,
};
 
export default nextConfig;

C'est toute la configuration pour une application React 19. Aucun tableau de dépendances à toucher, aucun composant à réécrire.

Les options de configuration qui comptent

La plupart des applications React 19 ne nécessitent aucune configuration. Quand vous avez besoin de contrôle, quatre options pèsent leur poids.

compilationMode décide quelles fonctions le compilateur touche. Le défaut infère le bon ensemble. Réglez-le sur 'annotation' pour une adoption en opt-in, où seules les fonctions que vous marquez avec la directive "use memo" sont compilées :

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      compilationMode: 'annotation',
    }],
  ],
};

target indique au compilateur pour quelle version de React générer le code. Le défaut est '19'. Pour les applications React 17 ou 18, réglez-le explicitement et ajoutez le paquet runtime :

['babel-plugin-react-compiler', {
  target: '18', // également : pnpm add react-compiler-runtime
}]

panicThreshold contrôle ce qui se passe quand le compilateur rencontre du code qu'il ne peut pas optimiser en toute sécurité. Le régler sur 'none' ignore ce composant au lieu de faire échouer le build — la posture recommandée en production.

gating permet de placer la sortie compilée derrière un drapeau de fonctionnalité à l'exécution, pour déployer le compilateur sur un pourcentage d'utilisateurs et comparer avant de vous engager.

L'adopter sur une base de code existante

Sur une application mature, la voie sûre est incrémentale. Démarrez en mode 'annotation' afin que rien ne change tant que vous n'avez pas inscrit un composant avec "use memo". Vérifiez le comportement, puis élargissez le filet.

Vous pouvez aussi exclure n'importe quel composant mal géré par le compilateur en ajoutant la directive d'exclusion en haut de son corps :

function LegacyChart() {
  "use no memo";
  // le compilateur ignore ce composant
}

Pour vos appels existants à useMemo et useCallback, le conseil est prudent : laissez-les en place au début. Retirer la mémoïsation manuelle peut changer la sortie rendue si le code d'origine dépendait d'une frontière de cache précise. Une fois le compilateur activé et vos tests au vert, supprimez progressivement les Hooks écrits à la main et laissez le compilateur prendre le relais. Pour le nouveau code, comptez sur le compilateur par défaut et ne recourez à useMemo ou useCallback que comme des échappatoires délibérées.

L'autre étape non négociable est le linter. Installez la dernière version de eslint-plugin-react-hooks et utilisez son preset recommandé :

npm install -D eslint-plugin-react-hooks@latest

Le compilateur ne vaut que par le code qu'il analyse. Les règles de lint imposent les Règles de React que le compilateur suppose — composants purs, aucune mutation pendant le rendu, ordre stable des Hooks — et font remonter les violations avant qu'elles n'atteignent le build.

Devriez-vous l'activer ?

Si vous êtes sur React 19 et démarrez un nouveau projet, la réponse est oui — il est déjà dans les gabarits. Pour une application existante, le rapport coût-bénéfice est solide : une accélération mesurable, moins de code d'optimisation à maintenir, et une classe entière de bugs de dépendances périmées éliminée. Le risque est borné car l'adoption est incrémentale et réversible composant par composant.

Le changement le plus profond est conceptuel. La mémoïsation de performance passe d'une discipline manuelle portée dans chaque revue de code à une garantie à la compilation. Comme l'a formulé l'équipe React, cette version stable se veut « une nouvelle fondation et une nouvelle ère pour la prochaine décennie et au-delà de React ». Pour les équipes de la région MENA et d'ailleurs qui livrent des applications React, cela signifie des expériences plus rapides sur des appareils modestes et des réseaux lents — avec moins de code à écrire et à maintenir pour y parvenir.

Commencez par le mode 'annotation' sur une fonctionnalité, mesurez, puis étendez. Le compilateur prend en charge la partie fastidieuse pour que vous consacriez votre attention au produit.