How do you handle race conditions in CSR data fetching with useEffect?

Question

Accepted Answer

Race conditions in client-side data fetching occur when a component fetches data multiple times in rapid succession, and responses arrive out of order—an older request completes after a newer one, overwriting the latest data with stale information. This is particularly common in scenarios like search inputs, tab switching, or route changes. In `useEffect`, race conditions happen because there's no built-in mechanism to cancel pending requests when dependencies change. You must manually handle cleanup to ensure that only the most recent request updates the component state. ```jsx 'use client'; import { useState, useEffect } from 'react'; // ❌ PROBLEM: Race condition example export default function SearchResults({ query }) { const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { setLoading(true); // This is slow (3 seconds) fetch(`/api/search?q=${query}`) .then(res => res.json()) .then(data => { // If query changes while this is pending, // this might overwrite with stale data setResults(data); setLoading(false); }); }, [query]); return

{/* render results */}

; } // Scenario: // 1. User types 'a' → fetch starts (3s response) // 2. User types 'ab' → fetch starts (1s response) // 3. 'ab' response arrives first, updates state correctly // 4. 'a' response arrives 2 seconds later, overwrites with stale data! // Result: UI shows results for 'a' even though query is 'ab' ``` ```jsx 'use client'; import { useState, useEffect } from 'react'; // ✅ SOLUTION 1: isMounted flag export default function SearchResults({ query }) { const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { let isMounted = true; // Track if component is still mounted setLoading(true); fetch(`/api/search?q=${query}`) .then(res => res.json()) .then(data => { // Only update state if this component instance is still mounted // and this is the most recent effect run if (isMounted) { setResults(data); setLoading(false); } }) .catch(error => { if (isMounted) { console.error(error); setLoading(false); } }); // Cleanup function runs before next effect or unmount return () => { isMounted = false; }; }, [query]); return

{/* render results */}

; } // The isMounted flag prevents state updates after component unmounts // or when a newer effect has already run ``` ```jsx 'use client'; import { useState, useEffect } from 'react'; // ✅ SOLUTION 2: AbortController - cancels actual network requests export default function SearchResults({ query }) { const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { const controller = new AbortController(); const signal = controller.signal; setLoading(true); fetch(`/api/search?q=${query}`, { signal }) .then(res => res.json()) .then(data => { setResults(data); setLoading(false); }) .catch(error => { // Ignore abort errors (they're expected on cancellation) if (error.name !== 'AbortError') { console.error(error); } setLoading(false); }); // Cleanup: cancel the request when query changes or component unmounts return () => { controller.abort(); }; }, [query]); return

{/* render results */}

; } // This actually cancels the in-flight HTTP request, // preventing it from ever resolving and calling setState ``` Another approach is using `useRef` to track the current request and ignore outdated responses. This is useful when you can't cancel requests (e.g., with some third-party APIs) but need to ensure only the latest response updates state. The pattern involves incrementing a request counter and checking it in the response handler . ```jsx 'use client'; import { useState, useEffect, useRef } from 'react'; // ✅ SOLUTION 3: Request ID tracking (when AbortController isn't available) export default function SearchResults({ query }) { const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); const requestIdRef = useRef(0); useEffect(() => { const currentRequestId = ++requestIdRef.current; setLoading(true); fetch(`/api/search?q=${query}`) .then(res => res.json()) .then(data => { // Only update if this is the most recent request if (currentRequestId === requestIdRef.current) { setResults(data); setLoading(false); } }) .catch(error => { if (currentRequestId === requestIdRef.current) { console.error(error); setLoading(false); } }); }, [query]); return

{/* ren

How do you handle race conditions in CSR data fetching with useEffect?

Handle race conditions in useEffect by using cleanup functions to set a flag (isMounted), using AbortController to cancel in-flight requests, or simply switching to data fetching libraries like SWR or React Query that handle this automatically

Scenario Questions

Follow-up Questions