𝗦𝘁𝗼𝗽 𝗥𝗮𝗰𝗲 𝗖𝗼𝗻𝗱𝗶𝘁𝗶𝗼𝗻𝘀 𝗠𝗲𝘁 𝗥𝗲𝗮𝗰𝘁 𝗔𝗯𝗼𝗿𝘁𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗿𝘀
Gebruikers bewegen snel in webapplicaties. Deze snelheid zorgt voor twee belangrijke problemen voor ontwikkelaars.
Het eerste probleem is de 'unmounted component trap'. Een gebruiker klikt op een knop om gegevens op te halen. De aanvraag duurt vier seconden. Na twee seconden klikt de gebruiker op 'terug' en verlaat de pagina. De aanvraag gaat op de achtergrond door. Wanneer de gegevens binnenkomen, probeert de code een component bij te werken die niet meer bestaat. Dit veroorzaakt geheugenlekken.
Het tweede probleem is de race condition. Dit gebeurt vaak in zoekbalken.
- Een gebruiker typt "A". Aanvraag 1 start.
- Een gebruiker typt "AB". Aanvraag 2 start.
- Aanvraag 2 is als eerste klaar en toont de juiste gegevens.
- Aanvraag 1 is later klaar en overschrijft het scherm met oude gegevens.
Je lost beide problemen op met de AbortController API. Met deze tool kun je een netwerkverzoek stoppen wanneer het niet langer nodig is.
Hoe je dit implementeert:
- Maak een nieuwe AbortController aan binnen je useEffect.
- Geef het controller-signaal door aan je fetch-verzoek.
- Gebruik een try/catch-blok om de fout af te handelen.
- Controleer of de foutnaam AbortError is om opzettelijke annuleringen te negeren.
- Retourneer een cleanup-functie in je useEffect om controller.abort() aan te roepen.
Dit patroon werkt wanneer een component unmount of wanneer een dependency verandert.
Voordelen van deze aanpak:
- Je voorkomt dat verouderde gegevens nieuwe gegevens overschrijven.
- Je voorkomt geheugenlekken in je React-app.
- Je maakt browser-netwerkverbindingen vrij.
- Je applicatie blijft voorspelbaar en stabiel.
Bron: https://dev.to/iprajapatiparesh/stop-race-conditions-react-abortcontrollers-2899