# React Compiler: what changes in your code

React Compiler adds memoisation at build time: the code drops useMemo and useCallback, but must obey the rules of hooks.

> Page: https://ui.eneawork.it/blog/react-compiler-2026
> Markdown: https://ui.eneawork.it/blog/react-compiler-2026.md

*2026-11-01*

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.

Il catalogo EneUI conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, misurati da /api/stats il 1 novembre 2026. La cifra viene da una query all'endpoint, non da una stima: conta i record pubblicati, non la qualità dei componenti.

## 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

## 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.

## FAQ

### Devo togliere tutti i useMemo?

Solo dopo il healthcheck e con il compilatore attivo. Se un componente viene saltato, la memoizzazione manuale resta necessaria.

### Il compilatore funziona con Next.js?

Sì, tramite il plugin Babel o la configurazione del bundler. La versione di Next e quella del plugin vanno tenute allineate.

### Riduce i render di React?

No. Evita il lavoro inutile dentro un render e le prop che cambiano identità a ogni giro; il numero di render dipende dallo stato.

### Cosa succede a un componente che viola le regole?

Viene saltato senza errore. Il codice continua a funzionare come prima dell'attivazione, ma senza ottimizzazione.

### React Compiler è open source?

Sì, è distribuito con licenza MIT insieme al plugin Babel e agli strumenti di analisi.