Master safe data fetching with useEffect. Learn cleanup patterns, AbortController, race condition prevention, and modern alternatives with complete TypeScript examples.

# useEffect API Fetching: Race Conditions & Memory Leaks (2026)

You've probably written code like this: slap a fetch() call inside useEffect, set the data to state, and call it a day. It works—until users start reporting weird bugs. Duplicate requests, stale data appearing after fresh data, memory warnings in the console. Sound familiar?

Data fetching with useEffect looks simple on the surface but hides several traps that can break your app in production. This guide shows you exactly how to fetch data safely, handle cleanup properly, and avoid the common pitfalls that trip up even experienced React developers.

# Table of Contents

The Problem with Naive Fetching
Core Issue: Component Lifecycle vs Async Operations
Solution 1: Ignore Flag Pattern
Solution 2: AbortController (Recommended)
Handling Loading and Error States
Race Condition Prevention
TypeScript Type Safety
Common Mistakes and How to Fix Them
Modern Alternatives: React Query
Practical Example: GitHub Repository Search
FAQ

# The Problem with Naive Fetching

Here's what most developers write first (don't use this in production):

# TypeScript Version

      
typescript

import { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

// ❌ WRONG: Multiple issues with this approach
function UserProfile({ userId }: { userId: number }) {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    fetch(`https://api.example.com/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]);

  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

# JavaScript Version

      
javascript

import { useState, useEffect } from 'react';

// ❌ WRONG: Multiple issues with this approach
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`https://api.example.com/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]);

  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

What's wrong here?

Memory leak: If the component unmounts before the fetch completes, setUser runs on unmounted component
Race conditions: If userId changes quickly, responses may arrive out of order
No error handling: Network failures cause silent failures
No loading state: Users see "Loading..." flash between requests
No request cancellation: Old requests continue even when obsolete

# Core Issue: Component Lifecycle vs Async Operations

React's component lifecycle and async operations operate on different timelines. When you fetch data:

Component mounts → effect runs → fetch starts
User navigates away → component unmounts → fetch still running
Fetch completes → tries to call setState → React error: "Can't perform a React state update on an unmounted component"

This isn't just a warning—it indicates a real memory leak. Your app holds references to unmounted components, preventing garbage collection.

# Solution 1: Ignore Flag Pattern

The simplest fix uses a boolean flag to track if the component is still mounted:

# TypeScript Version

      
typescript

import { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

function UserProfile({ userId }: { userId: number }) {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    let isActive = true; // Tracks if component is still mounted

    fetch(`https://api.example.com/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        // Only update state if component is still mounted
        if (isActive) {
          setUser(data);
        }
      });

    // Cleanup function: runs when effect re-runs or component unmounts
    return () => {
      isActive = false; // Mark component as unmounted
    };
  }, [userId]);

  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

# JavaScript Version

      
javascript

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let isActive = true;

    fetch(`https://api.example.com/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        if (isActive) {
          setUser(data);
        }
      });

    return () => {
      isActive = false;
    };
  }, [userId]);

  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

How it works:

isActive starts as true when effect runs
Cleanup function sets it to false when component unmounts or userId changes
setUser only runs if isActive is still true

Limitation: This prevents the error but doesn't cancel the HTTP request—the fetch still completes and consumes bandwidth.

# Solution 2: AbortController (Recommended)

Modern browsers support AbortController, which actually cancels in-flight requests:

# TypeScript Version

      
typescript

import { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

function UserProfile({ userId }: { userId: number }) {
  const [user, setUser] = useState<User | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    // Create abort controller for this effect execution
    const controller = new AbortController();

    async function fetchUser() {
      try {
        const response = await fetch(
          `https://api.example.com/users/${userId}`,
          { signal: controller.signal } // Pass abort signal
        );

        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }

        const data = await response.json();
        setUser(data);
      } catch (err) {
        // Don't show error if request was aborted (expected behavior)
        if (err instanceof Error && err.name !== 'AbortError') {
          setError(err.message);
        }
      }
    }

    fetchUser();

    // Cleanup: abort request if component unmounts or userId changes
    return () => {
      controller.abort();
    };
  }, [userId]);

  if (error) return <div>Error: {error}</div>;
  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

# JavaScript Version

      
javascript

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    async function fetchUser() {
      try {
        const response = await fetch(
          `https://api.example.com/users/${userId}`,
          { signal: controller.signal }
        );

        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }

        const data = await response.json();
        setUser(data);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      }
    }

    fetchUser();

    return () => {
      controller.abort();
    };
  }, [userId]);

  if (error) return <div>Error: {error}</div>;
  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

Why this is better:

Actually cancels the HTTP request (saves bandwidth)
Browser stops processing the response
Network tab shows request as "cancelled"
AbortError is thrown, which we ignore (expected behavior)

# Handling Loading and Error States

Production apps need proper state management for loading and errors:

# TypeScript Version

      
typescript

import { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

type FetchState<T> = 
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: string };

function UserProfile({ userId }: { userId: number }) {
  const [state, setState] = useState<FetchState<User>>({ status: 'idle' });

  useEffect(() => {
    const controller = new AbortController();
    
    setState({ status: 'loading' });

    async function fetchUser() {
      try {
        const response = await fetch(
          `https://api.example.com/users/${userId}`,
          { signal: controller.signal }
        );

        if (!response.ok) {
          throw new Error(`Failed to fetch user: ${response.statusText}`);
        }

        const data = await response.json();
        setState({ status: 'success', data });
      } catch (err) {
        if (err instanceof Error && err.name !== 'AbortError') {
          setState({ status: 'error', error: err.message });
        }
      }
    }

    fetchUser();

    return () => controller.abort();
  }, [userId]);

  if (state.status === 'loading') return <div>Loading user...</div>;
  if (state.status === 'error') return <div>Error: {state.error}</div>;
  if (state.status === 'success') return <div>{state.data.name}</div>;
  
  return null;
}

# JavaScript Version

      
javascript

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [state, setState] = useState({ status: 'idle' });

  useEffect(() => {
    const controller = new AbortController();
    
    setState({ status: 'loading' });

    async function fetchUser() {
      try {
        const response = await fetch(
          `https://api.example.com/users/${userId}`,
          { signal: controller.signal }
        );

        if (!response.ok) {
          throw new Error(`Failed to fetch user: ${response.statusText}`);
        }

        const data = await response.json();
        setState({ status: 'success', data });
      } catch (err) {
        if (err.name !== 'AbortError') {
          setState({ status: 'error', error: err.message });
        }
      }
    }

    fetchUser();

    return () => controller.abort();
  }, [userId]);

  if (state.status === 'loading') return <div>Loading user...</div>;
  if (state.status === 'error') return <div>Error: {state.error}</div>;
  if (state.status === 'success') return <div>{state.data.name}</div>;
  
  return null;
}

Benefits:

Single state object (easier to manage)
Discriminated union in TypeScript (type safety)
Clear loading/error/success states
No impossible states (can't be loading and error simultaneously)

# Race Condition Prevention

Race conditions happen when responses arrive out of order. User searches for "react" → "react hooks" → "react query", but the "react" response arrives last, showing outdated results.

# TypeScript Version

      
typescript

import { useState, useEffect } from 'react';

interface SearchResult {
  id: string;
  title: string;
}

function SearchResults({ query }: { query: string }) {
  const [results, setResults] = useState<SearchResult[]>([]);

  useEffect(() => {
    const controller = new AbortController();

    async function search() {
      try {
        const response = await fetch(
          `https://api.example.com/search?q=${encodeURIComponent(query)}`,
          { signal: controller.signal }
        );

        if (!response.ok) throw new Error('Search failed');

        const data = await response.json();
        // AbortController ensures only the latest request updates state
        setResults(data.results);
      } catch (err) {
        if (err instanceof Error && err.name !== 'AbortError') {
          console.error('Search error:', err);
        }
      }
    }

    if (query) {
      search();
    } else {
      setResults([]); // Clear results when query is empty
    }

    return () => controller.abort();
  }, [query]);

  return (
    <ul>
      {results.map(result => (
        <li key={result.id}>{result.title}</li>
      ))}
    </ul>
  );
}

# JavaScript Version

      
javascript

import { useState, useEffect } from 'react';

function SearchResults({ query }) {
  const [results, setResults] = useState([]);

  useEffect(() => {
    const controller = new AbortController();

    async function search() {
      try {
        const response = await fetch(
          `https://api.example.com/search?q=${encodeURIComponent(query)}`,
          { signal: controller.signal }
        );

        if (!response.ok) throw new Error('Search failed');

        const data = await response.json();
        setResults(data.results);
      } catch (err) {
        if (err.name !== 'AbortError') {
          console.error('Search error:', err);
        }
      }
    }

    if (query) {
      search();
    } else {
      setResults([]);
    }

    return () => controller.abort();
  }, [query]);

  return (
    <ul>
      {results.map(result => (
        <li key={result.id}>{result.title}</li>
      ))}
    </ul>
  );
}

How AbortController prevents race conditions:

User types "react" → effect runs → creates controller A → fetches
User types "react hooks" → cleanup aborts controller A → creates controller B → fetches
"react" response arrives → but controller A is aborted → ignored
"react hooks" response arrives → controller B active → updates state ✓

# TypeScript Type Safety

Properly typing fetched data prevents runtime errors:

# TypeScript Version

      
typescript

import { useState, useEffect } from 'react';

// Define exact API response shape
interface ApiResponse {
  user: {
    id: number;
    name: string;
    email: string;
    createdAt: string;
  };
}

// Type guard to validate runtime data
function isValidUserResponse(data: unknown): data is ApiResponse {
  if (typeof data !== 'object' || data === null) return false;
  
  const obj = data as Record<string, unknown>;
  if (typeof obj.user !== 'object' || obj.user === null) return false;
  
  const user = obj.user as Record<string, unknown>;
  return (
    typeof user.id === 'number' &&
    typeof user.name === 'string' &&
    typeof user.email === 'string' &&
    typeof user.createdAt === 'string'
  );
}

function UserProfile({ userId }: { userId: number }) {
  const [user, setUser] = useState<ApiResponse['user'] | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const controller = new AbortController();

    async function fetchUser() {
      try {
        const response = await fetch(
          `https://api.example.com/users/${userId}`,
          { signal: controller.signal }
        );

        if (!response.ok) {
          throw new Error(`HTTP ${response.status}`);
        }

        const data: unknown = await response.json();

        // Runtime validation
        if (!isValidUserResponse(data)) {
          throw new Error('Invalid API response shape');
        }

        setUser(data.user);
      } catch (err) {
        if (err instanceof Error && err.name !== 'AbortError') {
          setError(err.message);
        }
      }
    }

    fetchUser();

    return () => controller.abort();
  }, [userId]);

  if (error) return <div>Error: {error}</div>;
  if (!user) return <div>Loading...</div>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <small>Joined: {new Date(user.createdAt).toLocaleDateString()}</small>
    </div>
  );
}

Key TypeScript patterns:

Define interfaces matching API responses
Use type guards to validate runtime data
Extract nested types with indexed access (ApiResponse['user'])
Handle unknown from response.json() safely

# Common Mistakes and How to Fix Them

# Mistake 1: Async useEffect

      
typescript

// ❌ WRONG: useEffect cannot be async
useEffect(async () => {
  const data = await fetch('/api/data');
  // TypeScript error: useEffect must not return Promise
}, []);

// ✅ CORRECT: Define async function inside
useEffect(() => {
  async function fetchData() {
    const response = await fetch('/api/data');
    const data = await response.json();
    setState(data);
  }
  fetchData();
}, []);

Why: useEffect expects either nothing or a cleanup function. Async functions return promises, which React interprets as an invalid cleanup function.

# Mistake 2: Forgetting Cleanup

      
typescript

// ❌ WRONG: No cleanup
useEffect(() => {
  fetch('/api/data')
    .then(res => res.json())
    .then(setState);
}, []);

// ✅ CORRECT: Always clean up
useEffect(() => {
  const controller = new AbortController();
  
  fetch('/api/data', { signal: controller.signal })
    .then(res => res.json())
    .then(setState)
    .catch(err => {
      if (err.name !== 'AbortError') console.error(err);
    });

  return () => controller.abort();
}, []);

# Mistake 3: Missing Dependencies

      
typescript

// ❌ WRONG: filter used but not in dependencies
function SearchResults({ filter }) {
  const [results, setResults] = useState([]);

  useEffect(() => {
    fetch(`/api/search?filter=${filter}`)
      .then(res => res.json())
      .then(setResults);
  }, []); // Missing filter dependency

  return <div>{results.length} results</div>;
}

// ✅ CORRECT: Include all used values
useEffect(() => {
  const controller = new AbortController();
  
  fetch(`/api/search?filter=${filter}`, { signal: controller.signal })
    .then(res => res.json())
    .then(setResults)
    .catch(err => {
      if (err.name !== 'AbortError') console.error(err);
    });

  return () => controller.abort();
}, [filter]); // Include filter

# Mistake 4: Not Handling Errors

      
typescript

// ❌ WRONG: Silent failures
useEffect(() => {
  fetch('/api/data')
    .then(res => res.json())
    .then(setState);
}, []);

// ✅ CORRECT: Proper error handling
useEffect(() => {
  const controller = new AbortController();

  async function fetchData() {
    try {
      const response = await fetch('/api/data', { 
        signal: controller.signal 
      });

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      const data = await response.json();
      setState(data);
    } catch (err) {
      if (err instanceof Error && err.name !== 'AbortError') {
        setError(err.message);
      }
    }
  }

  fetchData();

  return () => controller.abort();
}, []);

# Modern Alternatives: React Query

While useEffect works, modern data-fetching libraries like React Query handle these patterns automatically:

# TypeScript Version

      
typescript

import { useQuery } from '@tanstack/react-query';

interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(userId: number): Promise<User> {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  
  if (!response.ok) {
    throw new Error('Failed to fetch user');
  }
  
  return response.json();
}

function UserProfile({ userId }: { userId: number }) {
  const { data: user, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!user) return null;

  return <div>{user.name}</div>;
}

# JavaScript Version

      
javascript

import { useQuery } from '@tanstack/react-query';

async function fetchUser(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  
  if (!response.ok) {
    throw new Error('Failed to fetch user');
  }
  
  return response.json();
}

function UserProfile({ userId }) {
  const { data: user, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!user) return null;

  return <div>{user.name}</div>;
}

React Query benefits:

Automatic request cancellation
Built-in caching
Background refetching
Optimistic updates
Retry logic
No manual cleanup needed

When to use React Query vs useEffect:

React Query: Server state (API data, caching, synchronization)
useEffect: Side effects unrelated to data fetching (analytics, subscriptions, DOM manipulation)

# Practical Example: GitHub Repository Search

Real-world implementation showing all patterns together:

# TypeScript Version

      
typescript

import { useState, useEffect } from 'react';

interface Repository {
  id: number;
  name: string;
  full_name: string;
  description: string;
  stargazers_count: number;
  html_url: string;
}

interface GitHubSearchResponse {
  items: Repository[];
  total_count: number;
}

type SearchState = 
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; repos: Repository[]; total: number }
  | { status: 'error'; error: string };

function GitHubRepoSearch() {
  const [query, setQuery] = useState('');
  const [debouncedQuery, setDebouncedQuery] = useState('');
  const [state, setState] = useState<SearchState>({ status: 'idle' });

  // Debounce search input
  useEffect(() => {
    const timerId = setTimeout(() => {
      setDebouncedQuery(query);
    }, 500);

    return () => clearTimeout(timerId);
  }, [query]);

  // Fetch repositories
  useEffect(() => {
    if (!debouncedQuery) {
      setState({ status: 'idle' });
      return;
    }

    const controller = new AbortController();
    setState({ status: 'loading' });

    async function searchRepos() {
      try {
        const response = await fetch(
          `https://api.github.com/search/repositories?q=${encodeURIComponent(debouncedQuery)}&per_page=10`,
          { 
            signal: controller.signal,
            headers: {
              'Accept': 'application/vnd.github.v3+json'
            }
          }
        );

        if (!response.ok) {
          if (response.status === 403) {
            throw new Error('GitHub API rate limit exceeded');
          }
          throw new Error(`Search failed: ${response.statusText}`);
        }

        const data: GitHubSearchResponse = await response.json();
        
        setState({ 
          status: 'success', 
          repos: data.items, 
          total: data.total_count 
        });
      } catch (err) {
        if (err instanceof Error && err.name !== 'AbortError') {
          setState({ status: 'error', error: err.message });
        }
      }
    }

    searchRepos();

    return () => controller.abort();
  }, [debouncedQuery]);

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search GitHub repositories..."
        style={{ 
          width: '100%', 
          padding: '10px', 
          fontSize: '16px',
          marginBottom: '20px'
        }}
      />

      {state.status === 'loading' && (
        <div>Searching repositories...</div>
      )}

      {state.status === 'error' && (
        <div style={{ color: 'red' }}>Error: {state.error}</div>
      )}

      {state.status === 'success' && (
        <>
          <div style={{ marginBottom: '10px' }}>
            Found {state.total.toLocaleString()} repositories
          </div>
          <ul style={{ listStyle: 'none', padding: 0 }}>
            {state.repos.map(repo => (
              <li 
                key={repo.id}
                style={{ 
                  padding: '15px', 
                  border: '1px solid #ddd',
                  marginBottom: '10px',
                  borderRadius: '5px'
                }}
              >
                <a 
                  href={repo.html_url}
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ 
                    fontSize: '18px', 
                    fontWeight: 'bold',
                    color: '#0969da',
                    textDecoration: 'none'
                  }}
                >
                  {repo.full_name}
                </a>
                <div style={{ marginTop: '5px', color: '#666' }}>
                  {repo.description || 'No description'}
                </div>
                <div style={{ marginTop: '5px', fontSize: '14px' }}>
                  ⭐ {repo.stargazers_count.toLocaleString()} stars
                </div>
              </li>
            ))}
          </ul>
        </>
      )}

      {state.status === 'idle' && (
        <div style={{ color: '#666', textAlign: 'center' }}>
          Start typing to search GitHub repositories
        </div>
      )}
    </div>
  );
}

export default GitHubRepoSearch;

# JavaScript Version

      
javascript

import { useState, useEffect } from 'react';

function GitHubRepoSearch() {
  const [query, setQuery] = useState('');
  const [debouncedQuery, setDebouncedQuery] = useState('');
  const [state, setState] = useState({ status: 'idle' });

  // Debounce search input
  useEffect(() => {
    const timerId = setTimeout(() => {
      setDebouncedQuery(query);
    }, 500);

    return () => clearTimeout(timerId);
  }, [query]);

  // Fetch repositories
  useEffect(() => {
    if (!debouncedQuery) {
      setState({ status: 'idle' });
      return;
    }

    const controller = new AbortController();
    setState({ status: 'loading' });

    async function searchRepos() {
      try {
        const response = await fetch(
          `https://api.github.com/search/repositories?q=${encodeURIComponent(debouncedQuery)}&per_page=10`,
          { 
            signal: controller.signal,
            headers: {
              'Accept': 'application/vnd.github.v3+json'
            }
          }
        );

        if (!response.ok) {
          if (response.status === 403) {
            throw new Error('GitHub API rate limit exceeded');
          }
          throw new Error(`Search failed: ${response.statusText}`);
        }

        const data = await response.json();
        
        setState({ 
          status: 'success', 
          repos: data.items, 
          total: data.total_count 
        });
      } catch (err) {
        if (err.name !== 'AbortError') {
          setState({ status: 'error', error: err.message });
        }
      }
    }

    searchRepos();

    return () => controller.abort();
  }, [debouncedQuery]);

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search GitHub repositories..."
        style={{ 
          width: '100%', 
          padding: '10px', 
          fontSize: '16px',
          marginBottom: '20px'
        }}
      />

      {state.status === 'loading' && (
        <div>Searching repositories...</div>
      )}

      {state.status === 'error' && (
        <div style={{ color: 'red' }}>Error: {state.error}</div>
      )}

      {state.status === 'success' && (
        <>
          <div style={{ marginBottom: '10px' }}>
            Found {state.total.toLocaleString()} repositories
          </div>
          <ul style={{ listStyle: 'none', padding: 0 }}>
            {state.repos.map(repo => (
              <li 
                key={repo.id}
                style={{ 
                  padding: '15px', 
                  border: '1px solid #ddd',
                  marginBottom: '10px',
                  borderRadius: '5px'
                }}
              >
                <a 
                  href={repo.html_url}
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ 
                    fontSize: '18px', 
                    fontWeight: 'bold',
                    color: '#0969da',
                    textDecoration: 'none'
                  }}
                >
                  {repo.full_name}
                </a>
                <div style={{ marginTop: '5px', color: '#666' }}>
                  {repo.description || 'No description'}
                </div>
                <div style={{ marginTop: '5px', fontSize: '14px' }}>
                  ⭐ {repo.stargazers_count.toLocaleString()} stars
                </div>
              </li>
            ))}
          </ul>
        </>
      )}

      {state.status === 'idle' && (
        <div style={{ color: '#666', textAlign: 'center' }}>
          Start typing to search GitHub repositories
        </div>
      )}
    </div>
  );
}

export default GitHubRepoSearch;

Key patterns demonstrated:

Debouncing: Separate useEffect delays API calls until user stops typing
Cleanup: Both debounce timer and fetch request properly cleaned up
State machine: Clear states prevent impossible UI conditions
Error handling: Specific error messages for different failure scenarios
Accessibility: Proper ARIA labels and semantic HTML

# FAQ

# Q: Can I use async/await directly in useEffect?

A: No, useEffect cannot be an async function directly. The effect function must return either nothing or a cleanup function—async functions return promises.

      
typescript

// ❌ WRONG
useEffect(async () => {
  const data = await fetch('/api/data');
}, []);

// ✅ CORRECT
useEffect(() => {
  async function fetchData() {
    const data = await fetch('/api/data');
  }
  fetchData();
}, []);

# Q: When should I use AbortController vs the ignore flag?

A: Always prefer AbortController in production. It actually cancels the network request, saving bandwidth and server resources. The ignore flag only prevents state updates but the request still completes. Use ignore flag only if you need to support very old browsers that don't have AbortController (pre-2017).

# Q: Do I need cleanup if my component never unmounts?

A: Yes! Cleanup isn't just for unmounting—it runs every time dependencies change. If a user changes the userId prop rapidly, you'll have multiple concurrent requests without cleanup. This causes race conditions where old responses overwrite new ones.

# Q: Should I fetch data in useEffect or in an event handler?

A: It depends:

useEffect: Data needed immediately when component mounts (e.g., user profile on page load)
Event handler: Data fetched in response to user action (e.g., form submission, button click)

For search-as-you-type, use useEffect with debouncing. For "Search" button clicks, use event handler.

# Q: How do I handle authentication tokens with useEffect?

A: Pass tokens via headers option in fetch:

      
typescript

useEffect(() => {
  const controller = new AbortController();

  async function fetchProtectedData() {
    const token = localStorage.getItem('authToken');
    
    const response = await fetch('/api/protected', {
      signal: controller.signal,
      headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
      }
    });

    const data = await response.json();
    setState(data);
  }

  fetchProtectedData();

  return () => controller.abort();
}, []);

For complex auth flows (token refresh, automatic retry), consider libraries like React Query or SWR that handle this automatically.

# Q: What's the performance impact of AbortController?

A: Minimal. Creating an AbortController is extremely lightweight (microseconds). The performance gain from cancelling unnecessary requests far outweighs the cost. In high-frequency scenarios like search autocomplete, aborting saves significant bandwidth and server load.

Related Articles:

Questions? Share your data fetching patterns and challenges in the comments below! Have you encountered race conditions in production? How did you debug them?