Verifica Funzionamento React Compiler

Questa guida spiega come verificare che React Compiler stia funzionando correttamente e quando è ancora necessario usare useCallback e useMemo.

🎯 Cosa Ottimizza React Compiler

React Compiler ottimizza automaticamente:

1. Funzioni event handler (es. onClick, onChange) - Non serve useCallback
2. Componenti - Non serve React.memo
3. Codice React in generale - Analisi automatica delle dipendenze

⚠️ Quando useCallback e useMemo sono ANCORA Necessari

useCallback è necessario quando:

1. La funzione è nella dependency array di useEffect

   const fetchData = useCallback(async () => {
       const result = await api.getData();
       setData(result);
   }, []);
   
   useEffect(() => {
       fetchData(); // ✅ Con useCallback: stabile
   }, [fetchData]);

2. La funzione è passata a un hook custom che la usa in useEffect

   function handleMessage(msg) { ... }
   useBroadcastChannel("auth", handleMessage); // ✅ Serve useCallback

useMemo è necessario quando:

1. Calcoli costosi con dipendenze esplicite

   // ❌ React Compiler non può ottimizzare questo
   const result = expensiveCalculation(props.data);
   
   // ✅ Usa useMemo per controllo esplicito
   const result = useMemo(() =>
       expensiveCalculation(props.data),
       [props.data]
   );

Regola Pratica:

Caso	useCallback/useMemo necessario?
Funzione event handler (onClick)	❌ NO
Componente figlio	❌ NO (non serve React.memo)
Funzione in dependency di useEffect	✅ SÌ - useCallback
Funzione passata a hook custom	✅ SÌ - useCallback
Calcolo costoso con dipendenze	✅ SÌ - useMemo

📋 Metodi di Verifica

1. Pagina di Test Dedicata ✅ CONSIGLIATO

Abbiamo creato una pagina di test: /test-compiler

⚠️ Nota: Questa pagina è accessibile SOLO in modalità sviluppo. In produzione viene automaticamente reindirizzata alla home.

Come usarla:

# Avvia il dev server
npm run dev

# Apri nel browser (dev mode usa /client/ come base path)
http://localhost:5173/client/test-compiler

Nota: In dev mode l'app è servita su /client/, mentre in build è servita sulla root /.

La pagina mostra due componenti affiancati:

• 🟢 Con React Compiler - Ottimizzazioni automatiche attive
• 🔴 Senza React Compiler - Nessuna ottimizzazione

Test da eseguire:

1. Apri la Console del Browser (F12)

2. Clicca "Increment Parent" su ENTRAMBI i componenti (verde e rosso)

3. Verifica nella console:

   • 🟢 Con Compiler: Vedi solo [WITH COMPILER] Rendering, NON vedi [WITH COMPILER] Child Rendering
   • 🔴 Senza Compiler: Vedi sia [WITHOUT COMPILER] Rendering che [WITHOUT COMPILER] Child Rendering

4. Clicca "Click from Child" su entrambi

5. Verifica nella console:

   • Entrambi ora mostrano il rendering del Child (corretto, perché value è cambiato)

Differenza chiave:

• 🟢 Con Compiler: Child NON si ri-renderizza quando cambia solo parentCount
• 🔴 Senza Compiler: Child si ri-renderizza OGNI volta

2. React DevTools Profiler ✅ PROFESSIONALE

Il Profiler mostra graficamente i re-render:

Setup:

1. Installa React DevTools
2. Apri DevTools → Tab "Profiler"
3. Vai su /test-compiler

Test:

1. Clicca il pulsante ⏺ Record nel Profiler
2. Clicca "Increment Parent" 3-4 volte
3. Clicca ⏹ Stop recording

Cosa verificare nel Flame Graph:

• ✅ Il componente Parent appare in ogni render
• ✅ Il componente Child NON appare (non viene re-renderizzato)
• ✅ Questo dimostra che React Compiler sta ottimizzando automaticamente

3. Test Automatici

I test verificano che il comportamento sia corretto:

# Esegui tutti i test
npm run test:run

# Esegui test con coverage
npm run test:coverage

Risultato atteso:

• ✅ Tutti i test passano
• ✅ Le funzioni con useCallback mantengono identità stabile
• ✅ Nessun loop infinito in useEffect

5. Verifica Manuale nel Codice

File ottimizzati:

• app/components/auth/AuthSyncListener.tsx - callback passati ad altri hook

Come verificare:

1. Apri l'applicazione in dev mode: npm run dev
2. Esegui azioni che usano TanStack Query hooks:
   • Login
   • Cambio password
   • Selezione azienda
3. Verifica nella Console Network (F12 → Network):
   • ✅ Le chiamate API funzionano correttamente
   • ✅ Non ci sono chiamate duplicate
   • ✅ Il comportamento è identico a prima

🔧 Configurazione React Compiler

La configurazione si trova in vite.config.ts:

babel({
    filter: /\.[jt]sx?$/,
    babelConfig: {
        presets: ["@babel/preset-typescript"],
        plugins: [["babel-plugin-react-compiler", ReactCompilerConfig]],
    },
})

Verifica installazione:

npm list babel-plugin-react-compiler

📊 Riepilogo Stato Attuale

� Riepilogo Stato Attuale

✅ Ottimizzazioni Applicate

1. Rimozione React.memo - Non più necessario per componenti
2. useCallback mantenuto dove necessario:
   • ✅ AuthSyncListener - callback passati ad altri hook
3. useMemo usato per calcoli costosi con dipendenze esplicite

🧪 Test di Verifica

# Test protezione route
npm test -- test-compiler.protection

# Tutti i test
npm run test:run

�📚 Risorse

• React Compiler Docs
• Babel Plugin React Compiler
• React DevTools

✨ Best Practices Finali

Quando React Compiler Ottimizza Automaticamente:

• ✅ Event handlers (onClick, onChange, ecc.)
• ✅ Componenti semplici (non serve React.memo)
• ✅ JSX e rendering

Quando Serve Ancora Ottimizzazione Manuale:

• ⚠️ Funzioni in dependency array → useCallback
• ⚠️ Callback passati ad altri hook → useCallback
• ⚠️ Calcoli costosi con dipendenze → useMemo

Regola d'Oro:

Se una funzione è usata come dipendenza di useEffect, usa useCallback.

🎯 Conclusione

Il progetto usa un approccio ibrido:

• ✅ React Compiler per ottimizzazioni automatiche generali
• ✅ useCallback/useMemo dove semanticamente necessario
• ✅ Codice più pulito e manutenibile
• ✅ Performance garantite

Questo è l'approccio consigliato anche dalla documentazione ufficiale di React! 🚀