PricingLoginStart free
React Academy · Lektion

Kapløbsbetingelser og oprydning i effekter

Brug AbortController i useEffect til at annullere forældede fetch-anmodninger ved genrendering.

Lektion 1 af 413 trin

Kapløbsbetingelser og oprydning i effekter er en gratis React Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion lærer du, hvordan race conditions opstår i React-effekter, der henter data, og hvordan du fjerner dem ved at bruge AbortController til oprydning.

Hvad er en race condition?

En race condition opstår, når to asynkrone operationer afsluttes i en uforudsigelig rækkefølge. I React kan et langsomt fetch-kald for element A ved hurtig navigation mellem elementer blive afsluttet efter fetch-kaldet for element B, så der vises forældede data.

Fejlen: Forældet fetch-svar

Uden oprydning kører begge fetch-kald, hvis komponenten rendere igen med et nyt ID, før det gamle fetch-kald er afsluttet. Det ældre og langsommere fetch-kald kan overskrive nyere data i tilstanden.
useEffect(() => {
  fetch('/api/item/' + id)
    .then(r => r.json())
    .then(data => setData(data)); // may run AFTER a newer fetch!
}, [id]);

Løsning 1: ignore-flag

En enkel løsning er at sætte et boolsk `ignore`-flag i effekten. Oprydningsfunktionen sætter det til true. Callback-funktionen for fetch-kaldet kontrollerer flaget, før den kalder 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 er den moderne standard. Opret en controller i effekten, giv dens signal videre til fetch, og annuller den i oprydningsfunktionen. Fetch-kaldet kaster en AbortError, som du kan ignorere.
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

Brug try/catch sammen med asynkrone funktioner inde i useEffect. Ignorer AbortError i catch-blokken.
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]);

Oprydning er altid nødvendig

Selv når race conditions er usandsynlige, f.eks. ved et enkelt fetch-kald ved montering, skal du altid tilføje oprydning. I React 18 StrictMode køres effekter to gange — uden oprydning forurener den første forladte forespørgsel tilstanden.

Fælden med async i useEffect

Callback-funktionen i useEffect kan ikke være `async`. Definér en asynkron funktion inde i effekten, og kald den med det samme — eller brug en almindelig funktion med .then()/.catch().
useEffect(() => {
  // useEffect callback is NOT async
  async function fetchData() { /* ... */ }
  fetchData(); // call it
  return () => ctrl.abort();
}, [id]);

Biblioteker håndterer det for dig

React Query, SWR og RTK Query håndterer alle race conditions, annullering og oprydning automatisk. Når du bruger disse biblioteker, behøver du ikke skrive AbortController-kode manuelt.

Test af race conditions

Sådan tester du race conditions manuelt: Åbn Network DevTools, begræns forbindelsen til 'Slow 3G', og klik hurtigt mellem elementer. Uden oprydning vil du se forældede data blinke frem. Med AbortController vises kun det sidst valgte element.

Hurtig kontrol

Hvad gør det at kalde controller.abort() i en oprydningsfunktion for useEffect?
Besvar den i den interaktive lektion

Opsummering

Race conditions opstår, når et forældet fetch-svar opdaterer tilstanden efter et nyere fetch-kald. Løs problemet med et ignore-flag eller AbortController. Annuller eller ignorér altid i useEffect-oprydningen. Biblioteker som React Query håndterer dette automatisk.

Næste lektion

Næste lektion: **useTransition for ikke-blokerende UI-opdateringer** — du pakker tunge tilstandsopdateringer ind i startTransition for at holde brugerfladen responsiv.
Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
88
Lektioner
324
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Kapløbsbetingelser og oprydning i effekter” gratis?

Ja — hele teksten til “Kapløbsbetingelser og oprydning i effekter” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Kapløbsbetingelser og oprydning i effekter”?

Brug AbortController i useEffect til at annullere forældede fetch-anmodninger ved genrendering. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Kapløbsbetingelser og oprydning i effekter”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Kapløbsbetingelser og oprydning i effekter
  2. useTransition til ikke-blokerende UI-opdateringer
  3. useDeferredValue til debounce af input
  4. Suspense til data- og kodegrænser
← Tilbage til React Academy