javascript / expert
Snippet
Managing Asynchronous Race Conditions with AbortController and Signals
When multiple requests are fired in quick succession (e.g., during typing), older requests might resolve after newer ones, causing stale data. AbortController allows you to cancel previous requests in the useEffect cleanup function.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
'use client';import { useState, useEffect } from 'react';export default function AsyncSearch({ query }: { query: string }) {const [data, setData] = useState([]);useEffect(() => {const controller = new AbortController();(async () => {try {const res = await fetch(`/api/data?q=${query}`, { signal: controller.signal });setData(await res.json());} catch (err: any) {if (err.name !== 'AbortError') console.error(err);}})();return () => controller.abort();}, [query]);return <div>{JSON.stringify(data)}</div>;}
nextjs
Breakdown
1
signal: controller.signal
Associating the fetch request with an abort signal to allow programmatic cancellation.
2
controller.abort()
Aborting the request in the cleanup function to prevent state updates on unmounted components or stale queries.