React Academy · Lezione

Race condition e pulizia degli effect

Utilizzi AbortController in useEffect per annullare le richieste fetch obsolete dopo un re-render.

Race condition e pulizia degli effect è una lezione React 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 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à come si verificano le race condition negli effetti di React che recuperano dati e come eliminarle usando AbortController per il cleanup.

Che cos'è una race condition

Si verifica una race condition quando due operazioni asincrone terminano in un ordine imprevedibile. In React, se l'utente passa rapidamente da un elemento all'altro, una richiesta fetch lenta per l'elemento A potrebbe risolversi dopo quella per l'elemento B e mostrare dati obsoleti.

Il bug: risposta fetch obsoleta

Senza cleanup, se il componente viene renderizzato di nuovo con un nuovo ID prima che il vecchio fetch sia terminato, entrambe le richieste vengono eseguite. Il fetch più vecchio e lento potrebbe sovrascrivere nello stato i dati più recenti.

useEffect(() => {
  fetch('/api/item/' + id)
    .then(r => r.json())
    .then(data => setData(data)); // may run AFTER a newer fetch!
}, [id]);

Correzione 1: flag ignore

Una soluzione semplice consiste nell'impostare un flag booleano `ignore` nell'effect. La funzione di cleanup lo imposta su true. La callback di fetch verifica il flag prima di chiamare setState.

useEffect(() => {
  let ignore = false;
  fetch('/api/item/' + id)
    .then(r => r.json())
    .then(data => { if (!ignore) setData(data); });
  return () => { ignore = true; };
}, [id]);

Correzione 2: AbortController

AbortController è lo standard moderno. Crei un controller nell'effect, passi il relativo signal a fetch e lo interrompa nella funzione di cleanup. Il fetch genera un AbortError che può ignorare.

useEffect(() => {
  const controller = new AbortController();
  fetch('/api/item/' + id, { signal: controller.signal })
    .then(r => r.json())
    .then(data => setData(data))
    .catch(err => {
      if (err.name === 'AbortError') return; // expected
      setError(err.message);
    });
  return () => controller.abort();
}, [id]);

AbortController con async/await

Utilizzi try/catch con funzioni async all'interno di useEffect. Ignori AbortError nel blocco catch.

useEffect(() => {
  const ctrl = new AbortController();
  async function load() {
    try {
      const res = await fetch('/api/' + id, { signal: ctrl.signal });
      const json = await res.json();
      setData(json);
    } catch (e) {
      if (e.name !== 'AbortError') setError(e.message);
    }
  }
  load();
  return () => ctrl.abort();
}, [id]);

Il cleanup è sempre necessario

Anche quando le race condition sono improbabili, ad esempio nel caso di un fetch eseguito una sola volta al mount, aggiunga sempre il cleanup. In React 18 StrictMode, gli effetti vengono eseguiti due volte: senza cleanup, la prima richiesta abbandonata finisce per alterare lo stato.

L'insidia dell'asincronia in useEffect

La callback di useEffect non può essere `async`. Definisca una funzione async all'interno dell'effect e la chiami immediatamente, oppure usi una funzione normale con .then()/.catch().

useEffect(() => {
  // useEffect callback is NOT async
  async function fetchData() { /* ... */ }
  fetchData(); // call it
  return () => ctrl.abort();
}, [id]);

Le librerie gestiscono tutto automaticamente

React Query, SWR e RTK Query gestiscono automaticamente race condition, abort e cleanup. Quando utilizza queste librerie, non deve scrivere manualmente il codice per AbortController.

Testare le race condition

Per testare manualmente le race condition: apra i Network DevTools, imposti il throttling su 'Slow 3G' e faccia rapidamente clic tra gli elementi. Senza cleanup, vedrà comparire per un istante dati obsoleti. Con AbortController, verrà mostrato solo l'ultimo elemento selezionato.

Verifica rapida

Che cosa fa la chiamata a controller.abort() nella funzione di cleanup di useEffect?

Riepilogo

Le race condition si verificano quando una risposta fetch obsoleta aggiorna lo stato dopo un fetch più recente. Le corregga con un flag ignore o con AbortController. Interrompa sempre le richieste o le ignori nel cleanup di useEffect. Librerie come React Query gestiscono tutto automaticamente.

Prossima lezione

Prossima lezione: **useTransition per aggiornamenti dell'interfaccia non bloccanti**: racchiuderà gli aggiornamenti di stato costosi in startTransition per mantenere reattiva l'interfaccia.

Domande Frequenti

La lezione «Race condition e pulizia degli effect» è gratuita?

Sì — il testo completo di «Race condition e pulizia degli effect» è 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 «Race condition e pulizia degli effect»?

Utilizzi AbortController in useEffect per annullare le richieste fetch obsolete dopo un re-render. 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 1 di 4.

Quanto tempo richiede la lezione «Race condition e pulizia degli effect»?

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

Race condition e pulizia degli effect
useTransition per aggiornamenti UI non bloccanti
useDeferredValue per il debounce degli input
Suspense per i confini di dati e codice

← Torna a React Academy