How do you cancel in-flight API requests when a component unmounts in CSR?

Question

Accepted Answer

In Client-Side Rendering (CSR), when a component unmounts while an API request is still in flight, React will throw an error if you try to update the state of an unmounted component. More importantly, the request continues to consume resources and may later attempt to update state that no longer exists, causing memory leaks and console warnings. The solution is to cancel in-flight requests during cleanup. The modern approach uses the AbortController API with fetch, which actually cancels the underlying network request, preventing it from ever resolving and calling setState on an unmounted component. ```jsx 'use client'; import { useState, useEffect } from 'react'; // ❌ PROBLEM: This causes warnings and memory leaks export default function UserProfile({ userId }) { const [user, setUser] = useState(null); useEffect(() => { fetch(`/api/users/${userId}`) .then(res => res.json()) .then(data => { // If component unmounts before this resolves, // you get: "Can't perform a React state update on an unmounted component" setUser(data); }); }, [userId]); return

{user?.name}

; } // If the user navigates away before the request completes, // React logs a warning and the request continues unnecessarily ``` ```jsx 'use client'; import { useState, useEffect } from 'react'; // ✅ SOLUTION: AbortController cancels the actual request export default function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const controller = new AbortController(); const signal = controller.signal; setLoading(true); fetch(`/api/users/${userId}`, { signal }) .then(res => res.json()) .then(data => { // This only runs if the request wasn't cancelled setUser(data); setLoading(false); }) .catch(error => { // Don't update state on abort errors (they're expected) if (error.name !== 'AbortError') { console.error('Fetch error:', error); setLoading(false); } }); // Cleanup: cancel the request when component unmounts return () => { controller.abort(); }; }, [userId]); if (loading) return

Loading...

; return

{user?.name}

; } // When component unmounts, AbortController.abort(): // 1. Cancels the network request immediately // 2. The fetch promise rejects with an AbortError // 3. We check error.name and avoid setting state ``` ```jsx 'use client'; import { useState, useEffect } from 'react'; // ✅ Same pattern with async/await export default function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const controller = new AbortController(); let isMounted = true; const fetchData = async () => { try { setLoading(true); const response = await fetch(`/api/users/${userId}`, { signal: controller.signal }); const data = await response.json(); // Double-check with mounted flag if (isMounted) { setUser(data); setLoading(false); } } catch (error) { if (error.name !== 'AbortError' && isMounted) { console.error(error); setLoading(false); } } }; fetchData(); return () => { controller.abort(); isMounted = false; }; }, [userId]); if (loading) return

Loading...

; return

{user?.name}

; } ``` Modern data fetching libraries like SWR and React Query handle cancellation automatically, along with caching, deduplication, and many other edge cases. They're the recommended approach for production applications as they eliminate entire classes of bugs and provide better performance out of the box. ```jsx 'use client'; import useSWR from 'swr'; const fetcher = (url) => fetch(url).then(r => r.json()); // ✅ SWR handles cancellation and prevents memory leaks automatically export default function UserProfile({ userId }) { const { data, error, isLoading } = useSWR( `/api/users/${userId}`, fetcher ); if (error) return

Error loading user

; if (isLoading) return

Loading...

; return

{data.name}

; } // SWR automatically: // - Cancels stale requests when new ones are made // - Prevents state updates on unmounted components // - Deduplicates requests across components ``` ```jsx 'use client'; import { useQuery } from '@tanstack/react-query'; const fetchUser = async ({ queryKey }) => { const [_, userId] = queryKey; const res = await fetch(`/api/users/${userId}`); return res.json(); }; // ✅ React Query also handles cancellation export default function UserProfile({ userId }) { const { data, error, isLoading } = useQuery({ queryKey: ['user', userId], queryFn: fetchUser, }); if (error) retu

How do you cancel in-flight API requests when a component unmounts in CSR?

Cancel in-flight API requests in CSR components using AbortController with fetch, cleaning up in useEffect, or using data fetching libraries like SWR or React Query that handle cancellation automatically

How do you cancel in-flight API requests when a component unmounts in CSR?

Cancel in-flight API requests in CSR components using AbortController with fetch, cleaning up in useEffect, or using data fetching libraries like SWR or React Query that handle cancellation automatically

Scenario Questions

Follow-up Questions