React Academy · Lezione

Debug degli errori comuni di React

Diagnosticare gli avvisi per chiavi mancanti, i bug dello state undefined e gli errori di hydration.

Debug degli errori comuni di React è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuto

In questa lezione imparerà a diagnosticare gli errori più comuni di React: avvisi relativi alle key mancanti, problemi causati da uno stato undefined, rendering eccessivi e discrepanze di hydration.

Avviso relativo a una key mancante

React registra: *Ogni elemento figlio di un elenco deve avere una prop "key" univoca.* Questo accade quando esegue il rendering di un array senza aggiungere una prop `key`. Risolva aggiungendo una key stabile e univoca a ogni elemento dell'elenco.

// Bad
items.map(item => <li>{item.name}</li>)

// Good
items.map(item => <li key={item.id}>{item.name}</li>)

Impossibile leggere le proprietà di undefined

Questo arresto anomalo indica spesso che lo stato è `undefined` al primo rendering. Inizializzi sempre lo stato con un valore predefinito sicuro (`[]` per gli array, `{}` per gli oggetti, `null` per i valori che verifica prima di usare).

// Bad — crashes if data is undefined
const [data, setData] = useState();
return <p>{data.name}</p>;

// Good
const [data, setData] = useState(null);
return data ? <p>{data.name}</p> : <p>Loading...</p>;

Errore di rendering eccessivo

React genera l'errore *Troppi rendering* quando un componente entra in un ciclo di rendering infinito, in genere perché chiama `setState` senza condizioni durante il rendering o passa direttamente come prop una funzione inline `() => setState(...)` che viene attivata a ogni rendering.

// Bad — setState called on every render
function Counter() {
  const [n, setN] = useState(0);
  setN(n + 1); // infinite loop!
  return <p>{n}</p>;
}

Correggere i rendering eccessivi

Sposti gli aggiornamenti dello stato nei gestori degli eventi o in useEffect. Non chiami mai setState direttamente al livello superiore del corpo di un componente.

// Good — update only on click
function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Avviso di discrepanza durante l'hydration

Nelle app SSR, React avvisa: *Hydration non riuscita perché l'interfaccia utente iniziale non corrisponde a quella sottoposta a rendering sul server.* Tra le cause comuni ci sono l'uso di `Date.now()` o `Math.random()` durante il rendering e le estensioni del browser che iniettano HTML.

Correggere le discrepanze di hydration

Sposti i valori dinamici, come timestamp e ID casuali, in uno `useState` inizializzato all'interno di `useEffect`, così il server esegue sempre il rendering di un valore statico e il client lo aggiorna dopo il montaggio.

const [ts, setTs] = useState('');
useEffect(() => {
  setTs(Date.now().toString());
}, []);
return <p>{ts}</p>;

Lo stato non si aggiorna immediatamente

Ricordi che `setState` è asincrono. Registrare lo stato subito dopo averlo chiamato mostra il valore precedente. Per visualizzare il valore aggiornato, lo registri all'interno di un `useEffect` che ha la variabile di stato tra le dipendenze.

const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  console.log(count); // still old value!
}

useEffect(() => {
  console.log('updated:', count); // correct
}, [count]);

Il componente non si aggiorna quando cambia una prop

Se un componente non si aggiorna quando cambia una prop, controlli di non modificare direttamente un oggetto o un array. React usa l'uguaglianza dei riferimenti: modificare un oggetto esistente non attiva un nuovo rendering.

// Bad — same reference, no re-render
const list = [];
list.push('item');
setList(list);

// Good — new array reference
setList([...list, 'item']);

Leggere gli errori nell'overlay degli errori

Quando un'app React si arresta durante lo sviluppo, nel browser appare un overlay degli errori. Legga lo **stack dei componenti** in fondo: mostra ogni componente che ha eseguito il rendering del componente che ha generato l'errore, rendendo chiara l'origine del problema.

Verifica rapida

Qual è la causa più comune dell'errore React "Troppi rendering"?

Riepilogo

Ora sa correggere gli errori React più comuni: aggiungere key stabili agli elenchi, inizializzare lo stato in modo sicuro, evitare setState durante il rendering, gestire le discrepanze di hydration e leggere lo stack dei componenti nell'overlay degli errori.

Corso completato

Congratulazioni! Ha completato **React DevTools e debug**. Ora sa installare DevTools, esaminare gli alberi dei componenti e lo stato, eseguire il profiling dei rendering e diagnosticare gli errori di runtime React più frequenti.

Domande Frequenti

La lezione «Debug degli errori comuni di React» è gratuita?

Sì — il testo completo di «Debug degli errori comuni di React» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Debug degli errori comuni di React»?

Diagnosticare gli avvisi per chiavi mancanti, i bug dello state undefined e gli errori di hydration. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Debug degli errori comuni di React»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Installazione e apertura di React DevTools
Ispezione degli alberi dei componenti e delle props
Uso della scheda Profiler
Debug degli errori comuni di React

← Torna a React Academy