React Compiler

Le React Compiler (anciennement connu sous le nom de code « React Forget ») est un outil de compilation automatique créé par l’équipe React (Meta).

Son objectif est d’optimiser automatiquement les performances d’une application React en supprimant le besoin pour les développeurs d’optimiser manuellement les re-rendus (les « re-renders »). Il s’exécute au moment de la compilation du code (build time) et non dans le navigateur.

Par défaut, quand un composant React change d’état (state) ou reçoit de nouvelles propriétés (props), tout le composant et ses enfants recalculent et redessinent (re-render). Pour éviter que l’application ne ralentisse, les développeurs devaient utiliser manuellement des outils de « mémoïsation » (mise en cache) :

• React.memo() pour empêcher un composant enfant de se recalculer si ses props n’ont pas changé.
• useMemo() pour mettre en cache le résultat d’un calcul lourd.
• useCallback() pour mettre en cache une fonction.

Comment fonctionne le React Compiler ?

Le compilateur analyse votre code React lors de la compilation (via Babel, Vite, Webpack, etc.). Il comprend la logique de votre composant et injecte automatiquement le code d’optimisation sous le capot.

// Le développeur doit tout optimiser à la main
const ExpensiveList = React.memo(({ items, filter }) => {
  const filteredItems = useMemo(() => items.filter(filter), [items, filter]);
  return <ul>{filteredItems.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
});

Avec React Compiler

// Le développeur écrit du code simple. Le compilateur optimise tout seul.
const ExpensiveList = ({ items, filter }) => {
  const filteredItems = items.filter(filter); 
  return <ul>{filteredItems.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
};

Bien que très utile, le React Compiler n’est pas une baguette magique et impose quelques règles :

1. Il faut respecter les « Règles de React » : Le compilateur suppose que vos composants sont « purs » (qu’ils ne modifient pas des variables externes de manière inattendue) et que les hooks sont utilisés correctement. Si votre code contient des « effets de bord » (side effects) mal gérés, le compilateur pourrait générer du code buggy.
2. Il ne corrige pas une mauvaise architecture : Si vous placez tout votre état (state) dans un contexte global (Context API) qui change constamment, le compilateur ne pourra pas vous sauver. Une bonne architecture de state management reste nécessaire.
3. Version de React : Il est officiellement conçu pour être utilisé avec React 19 (et les versions ultérieures), bien que des solutions de rétroportage (backports) existent pour React 18.