Effetti vs rendering, dipendenze e cleanup

Obiettivo: Sapere cosa viene eseguito durante il rendering (in modo puro e senza effetti collaterali) e cosa appartiene agli effetti (sincronizzazione con il mondo esterno).

• Rendering: restituisce l'interfaccia
• Effetto: viene eseguito dopo il paint
• Cleanup: annulla il lavoro eseguito

Le dipendenze controllano quando viene eseguito un effetto:

• []: viene eseguito una volta dopo il mount
• [x]: viene eseguito al mount e ogni volta che x cambia
• Omettere le dipendenze: viene eseguito dopo ogni rendering (da evitare per chi è alle prime armi)

Un effetto con [count] aggiorna il titolo ogni volta che count cambia. Lo confronti con [], che viene eseguito una sola volta.

Aggiunga un cleanup restituendo una funzione dall'effetto. React lo esegue prima di rieseguire l'effetto e durante l'unmount.

• Rimuovere i listener
• Cancellare i timer
• Annullare le richieste

Colleghiamo un listener resize in un effetto e lo rimuoviamo nel cleanup per evitare perdite di memoria.

Problemi comuni:

• Eseguire effetti collaterali durante il rendering: li sposti in useEffect.
• Dipendenze mancanti che causano valori obsoleti.
• Dimenticare il cleanup per listener e timer.

Riepilogo: Mantenga puro il rendering; gli effetti vengono eseguiti dopo il paint. Utilizzi gli array delle dipendenze per controllare quando vengono eseguiti e restituisca un cleanup per annullare le sottoscrizioni o cancellare i timer.