Installation

Ce guide vous aidera à installer et configurer React Compiler dans votre application React.

Prérequis

React Compiler est conçu pour fonctionner au mieux avec React 19, mais il prend également en charge React 17 et 18. En savoir plus sur lacompatibilité des versions de React.

Installation

Installez React Compiler en tant quedevDependency:

npm install -D babel-plugin-react-compiler@latest

Ou avec Yarn :

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

Ou avec pnpm :

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

Configuration de base

React Compiler est conçu pour fonctionner par défaut sans aucune configuration. Cependant, si vous devez le configurer dans des circonstances particulières (par exemple, pour cibler des versions de React antérieures à la 19), reportez-vous à laréférence des options du compilateur.

Le processus de configuration dépend de votre outil de build. React Compiler inclut un plugin Babel qui s'intègre à votre pipeline de build.

Babel

Créez ou mettez à jour votre fichierbabel.config.js:

Vite

Si vous utilisez Vite, vous pouvez ajouter le plugin à vite-plugin-react :

Alternativement, si vous préférez un plugin Babel séparé pour Vite :

npm install -D vite-plugin-babel

Next.js

Veuillez vous référer à ladocumentation Next.jspour plus d'informations.

React Router

Installezvite-plugin-babel, et ajoutez-y le plugin Babel du compilateur :

npm install vite-plugin-babel

Webpack

Un loader webpack communautaire estmaintenant disponible ici.

Expo

Veuillez vous référer à ladocumentation d'Expopour activer et utiliser React Compiler dans les applications Expo.

Metro (React Native)

React Native utilise Babel via Metro, reportez-vous donc à la sectionUtilisation avec Babelpour les instructions d'installation.

Rspack

Veuillez vous référer à ladocumentation de Rspackpour activer et utiliser React Compiler dans les applications Rspack.

Rsbuild

Veuillez vous référer à ladocumentation de Rsbuildpour activer et utiliser React Compiler dans les applications Rsbuild.

Intégration ESLint

React Compiler inclut une règle ESLint qui aide à identifier le code qui ne peut pas être optimisé. Lorsque la règle ESLint signale une erreur, cela signifie que le compilateur ignorera l'optimisation de ce composant ou hook spécifique. C'est sans danger : le compilateur continuera à optimiser les autres parties de votre base de code. Vous n'avez pas besoin de corriger toutes les violations immédiatement. Traitez-les à votre rythme pour augmenter progressivement le nombre de composants optimisés.

Installez le plugin ESLint :

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

Si vous n'avez pas déjà configuré eslint-plugin-react-hooks, suivez lesinstructions d'installation dans le readme. Les règles du compilateur sont disponibles dans le préréglagerecommended-latest.

La règle ESLint va :

• Identifier les violations desRègles de React
• Montrer quels composants ne peuvent pas être optimisés
• Fournir des messages d'erreur utiles pour corriger les problèmes

Vérifier votre configuration

Après l'installation, vérifiez que React Compiler fonctionne correctement.

Vérifier React DevTools

Les composants optimisés par React Compiler afficheront un badge « Memo ✨ » dans React DevTools :

1. Installez l'extension de navigateurReact Developer Tools.
2. Ouvrez votre application en mode développement
3. Ouvrez React DevTools
4. Cherchez l'emoji ✨ à côté des noms des composants

Si le compilateur fonctionne :

• Les composants afficheront un badge « Memo ✨ » dans React DevTools
• Les calculs coûteux seront automatiquement mémoïsés
• AucunuseMemomanuel n'est requis

Vérifier la sortie de compilation

Vous pouvez également vérifier que le compilateur fonctionne en consultant la sortie de votre build. Le code compilé inclura la logique de mémoïsation automatique que le compilateur ajoute automatiquement.

Dépannage

Exclure des composants spécifiques

Si un composant pose problème après compilation, vous pouvez temporairement l'exclure en utilisant la directive"use no memo" :

Cela indique au compilateur de sauter l'optimisation pour ce composant spécifique. Vous devriez corriger le problème sous-jacent et supprimer la directive une fois résolu.

Pour plus d'aide au dépannage, consultez leguide de débogage.

Prochaines étapes

Maintenant que vous avez installé React Compiler, découvrez-en plus sur :

• Compatibilité des versions de Reactpour React 17 et 18
• Options de configurationpour personnaliser le compilateur
• Stratégies d'adoption incrémentalepour les bases de code existantes
• Techniques de débogagepour résoudre les problèmes
• Guide de compilation des bibliothèquespour compiler votre bibliothèque React