Basi di useEffect: dipendenze e pulizia
Eseguire effetti collaterali dopo il rendering, controllarne la riesecuzione con l’array delle dipendenze e restituire una funzione di pulizia per evitare perdite di memoria.
Basi di useEffect: dipendenze e pulizia è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Che cos'è useEffect?
useEffect esegue un effetto collaterale dopo il rendering di React. Gli effetti collaterali includono il recupero dei dati, la sottoscrizione agli eventi, la configurazione dei timer e l'interazione con API esterne. Gli effetti vengono eseguiti dopo il paint, non durante il rendering.
Sintassi di base
useEffect(effect, deps?). Per impostazione predefinita, la funzione dell'effetto viene eseguita dopo ogni rendering. Fornisca un array delle dipendenze per controllare quando viene eseguita.
import { useEffect } from 'react';
function Component() {
useEffect(() => {
console.log('Ran after every render');
});
}L'array delle dipendenze controlla quando viene eseguito l'effetto
Array vuoto []: esecuzione una volta dopo il montaggio. Array non vuoto [a, b]: esecuzione quando cambia a o b. Nessun array: esecuzione dopo ogni rendering, cosa che raramente è desiderabile.
// Run once on mount:
useEffect(() => {
fetchInitialData();
}, []);
// Run when userId changes:
useEffect(() => {
fetchUser(userId);
}, [userId]);
// Run after every render (usually a bug):
useEffect(() => {
trackPageView();
});La funzione di cleanup
Restituisca una funzione da useEffect per eseguire il cleanup: rimuovere i listener degli eventi, annullare le sottoscrizioni e cancellare i timer. Il cleanup viene eseguito prima dell'effetto successivo e allo smontaggio.
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
// Cleanup: remove listener when effect re-runs or component unmounts
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);Closure obsolete nelle dipendenze
Le closure catturano i valori a cui fanno riferimento nel momento in cui vengono create. Se legge un valore di stato o di prop all'interno di un effetto senza inserirlo nelle dipendenze, vedrà un valore obsoleto. La regola exhaustive-deps di ESLint rileva questo problema.
Regola exhaustive-deps di ESLint
La regola ESLint react-hooks/exhaustive-deps avvisa quando mancano dipendenze dell'effetto. Quasi sempre è corretto seguirne i suggerimenti: le dipendenze obsolete causano bug.
useEffect e useLayoutEffect
useEffect viene eseguito dopo il paint del browser. useLayoutEffect viene eseguito in modo sincrono dopo le modifiche al DOM, prima del paint. Usi useLayoutEffect per leggere le misure del DOM ed evitare sfarfallii visivi.
Più effetti
Usi più chiamate a useEffect per separare responsabilità non correlate. Ogni effetto può avere il proprio array delle dipendenze e la propria logica di cleanup.
// Separate effects for separate concerns:
useEffect(() => { document.title = `${count} items`; }, [count]);
useEffect(() => {
const sub = wsClient.subscribe(onMessage);
return () => sub.unsubscribe();
}, []);Condizioni di gara — il flag di ignoramento
Quando un effetto recupera dati in base alle prop, le richieste precedenti potrebbero completarsi dopo quelle successive. Usi un flag di cleanup per ignorare le risposte obsolete.
useEffect(() => {
let ignore = false;
async function load() {
const data = await fetchUser(userId);
if (!ignore) setUser(data); // only update if not cleaned up
}
load();
return () => { ignore = true; };
}, [userId]);Doppia esecuzione dell'effetto in Strict Mode
In sviluppo, React 18 Strict Mode monta, smonta e rimonta i componenti per portare alla luce i bug nel cleanup. Gli effetti vengono eseguiti due volte: è intenzionale e aiuta a rilevare il cleanup mancante.
Quando non usare useEffect
Non usi useEffect per: 1) derivare lo stato dalle prop, ma lo calcoli durante il rendering; 2) reimpostare lo stato quando cambiano le prop, ma usi la prop key; 3) aggiornare lo stato in modo incondizionato, perché ciò causa loop. In caso di dubbio, si chieda: questo codice reagisce a un evento dell'utente o a un sistema esterno?
Verifica rapida
Quando viene eseguita la funzione di cleanup di useEffect?
Riepilogo: useEffect
Gli effetti collaterali vengono eseguiti dopo il rendering. Un array delle dipendenze vuoto = una volta al montaggio. Un array delle dipendenze = a ogni modifica specificata. Restituisca una funzione di cleanup per prevenire perdite di risorse. Usi più effetti per responsabilità separate. Il flag di ignoramento impedisce alle risposte obsolete del recupero dati di essere utilizzate. Strict Mode esegue l'effetto due volte per verificare il cleanup. Non usi useEffect per valori derivati o per uno stato che può essere calcolato durante il rendering.
Domande Frequenti
La lezione «Basi di useEffect: dipendenze e pulizia» è gratuita?
Sì — il testo completo di «Basi di useEffect: dipendenze e pulizia» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Basi di useEffect: dipendenze e pulizia»?
Eseguire effetti collaterali dopo il rendering, controllarne la riesecuzione con l’array delle dipendenze e restituire una funzione di pulizia per evitare perdite di memoria. Eserciti Frontend 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 Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend 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 1 di 4.
Quanto tempo richiede la lezione «Basi di useEffect: dipendenze e pulizia»?
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 Frontend Academy?
Sì. Ogni lezione Frontend 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
- Basi di useEffect: dipendenze e pulizia
- Recuperare dati al montaggio
- Gestire gli stati di caricamento e di errore
- AbortController per la pulizia