PricingLoginStart free
React Academy · Lektion

Race conditions och rensning av effekter

Använd AbortController i useEffect för att avbryta inaktuella fetch-anrop vid omrendering.

Lektion 1 av 413 steg

Race conditions och rensning av effekter är en gratis lektion i React Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen lär Ni Er hur race conditions uppstår i React-effekter som hämtar data och hur de elimineras med AbortController för cleanup.

Vad är en race condition?

En race condition uppstår när två asynkrona operationer slutförs i en oförutsägbar ordning. I React kan en långsam hämtning för objekt A, om en användare snabbt navigerar mellan objekt, slutföras efter hämtningen för B och då visa inaktuella data.

Buggen: inaktuellt svar från hämtningen

Om komponenten renderas om med ett nytt ID innan den gamla hämtningen är klar, körs båda hämtningarna. Den äldre, långsammare hämtningen kan skriva över nyare data i state.
useEffect(() => {
  fetch('/api/item/' + id)
    .then(r => r.json())
    .then(data => setData(data)); // may run AFTER a newer fetch!
}, [id]);

Lösning 1: ignore-flagga

En enkel lösning är att sätta en boolesk `ignore`-flagga i effekten. Cleanup-funktionen sätter den till true. Callbacken för hämtningen kontrollerar flaggan innan den anropar setState.
useEffect(() => {
  let ignore = false;
  fetch('/api/item/' + id)
    .then(r => r.json())
    .then(data => { if (!ignore) setData(data); });
  return () => { ignore = true; };
}, [id]);

Lösning 2: AbortController

AbortController är den moderna standarden. Skapa en controller i effekten, skicka dess signal till fetch och avbryt den i cleanup-funktionen. fetch kastar ett AbortError som kan ignoreras.
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 med async/await

Använd try/catch med asynkrona funktioner inuti useEffect. Ignorera AbortError i catch-blocket.
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]);

Cleanup krävs alltid

Även när race conditions är osannolika (t.ex. en hämtning som körs en gång vid montering) ska cleanup alltid läggas till. I React 18 StrictMode körs effekter två gånger — utan cleanup förorenar den första övergivna begäran state.

Fallgropen med useEffect och async

Callbacken i useEffect kan inte vara `async`. Definiera en asynkron funktion inuti effekten och anropa den direkt – eller använd en vanlig funktion med .then()/.catch().
useEffect(() => {
  // useEffect callback is NOT async
  async function fetchData() { /* ... */ }
  fetchData(); // call it
  return () => ctrl.abort();
}, [id]);

Bibliotek hanterar detta åt Er

React Query, SWR och RTK Query hanterar alla race conditions, avbrytning och cleanup automatiskt. När Ni använder dessa bibliotek behöver Ni inte skriva AbortController-kod manuellt.

Testa race conditions

Testa race conditions manuellt genom att öppna Network DevTools, begränsa nätverket till 'Slow 3G' och snabbt klicka mellan objekt. Utan cleanup ser Ni inaktuella data blinka till. Med AbortController visas endast det senast valda objektet.

Snabbtest

Vad gör anropet controller.abort() i en cleanup-funktion för useEffect?
Besvara frågan i den interaktiva lektionen

Sammanfattning

Race conditions uppstår när ett inaktuellt svar från en hämtning uppdaterar state efter en nyare hämtning. Lös problemet med en ignore-flagga eller AbortController. Avbryt eller ignorera alltid i cleanup för useEffect. Bibliotek som React Query hanterar detta automatiskt.

Nästa steg

Nästa lektion: **useTransition för icke-blockerande UI-uppdateringar** — Ni kommer att omsluta kostsamma state-uppdateringar i startTransition för att hålla gränssnittet responsivt.
Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
88
Lektioner
324
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Race conditions och rensning av effekter” gratis?

Ja – hela texten till ”Race conditions och rensning av effekter” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Race conditions och rensning av effekter”?

Använd AbortController i useEffect för att avbryta inaktuella fetch-anrop vid omrendering. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Race conditions och rensning av effekter”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Race conditions och rensning av effekter
  2. useTransition för icke-blockerande UI-uppdateringar
  3. useDeferredValue för debouncing av inmatning
  4. Suspense för data- och kodgränser
← Tillbaka till React Academy