React Compiler: cosa cambia nel codice

React Compiler non cambia ciò che scrivi: legge i componenti in fase di build e inserisce la memoizzazione che prima aggiungevi a mano con useMemo e useCallback.

Cosa sparisce dal codice

La memoizzazione manuale era una difesa: senza, ogni render ricostruiva array, oggetti e callback, e i figli memoizzati si rirenderizzavano lo stesso. Il compilatore fa lo stesso lavoro con una condizione in più, cioè che il componente sia puro abbastanza da poterlo analizzare.

// prima: memoizzazione scritta a mano
const rows = useMemo(() => sortRows(data), [data]);

// dopo: il compilatore inserisce la stessa memoizzazione
const rows = sortRows(data);

Cosa serve perché funzioni

• Regole degli hook: niente hook condizionali o dentro cicli, altrimenti il componente viene saltato.
• Componenti puri: mutare una prop o una variabile esterna durante il render blocca l'ottimizzazione.
• Lint attivo: eslint-plugin-react-hooks segnala le violazioni che il compilatore tratta come bailout.

Installazione

npm i -D babel-plugin-react-compiler
npx react-compiler-healthcheck

Il plugin è distribuito con licenza MIT. react-compiler-healthcheck analizza il progetto e stampa quanti componenti compilano: è il numero da guardare prima di togliere le memoizzazioni a mano.

Cosa non cambia

Il compilatore non riduce il numero di render, evita solo il lavoro inutile dentro un render. Se un componente si rirenderizza perché lo stato è nel posto sbagliato, il costo resta: là serve spostare lo stato, non aggiungere una libreria.

Record vivi nel catalogo

Tre componenti con liste e tabelle, dove la memoizzazione si sente: lumina-interactive-list, interactive-logs-table e ruixen-contributors-table. Per esplorare per categoria parti da 111.985 componenti.

La limitazione

I bailout sono silenziosi: un componente saltato compila senza errori e senza guadagno, e l'unico segnale è il conteggio del healthcheck. Inoltre il codice ottimizzato è più difficile da leggere nel debug, perché le dipendenze calcolate non compaiono nel sorgente.

Dove continuare

Le novità della versione 19 sono in React 19; gli errori di key che rompono la memoizzazione sono in key warning nelle liste; il confronto misurato fra librerie è in librerie React 2026.