How to Optimize Fetch API in React

Optimizing Fetch API calls in React is essential for building fast, responsive, and resource-efficient web applications. This article explores practical strategies to enhance data fetching performance, including implementing abort controllers to prevent memory leaks, caching API responses, avoiding unnecessary re-renders, and managing race conditions.

1. Prevent Memory Leaks with AbortController

When a component initiates a fetch request and then unmounts before the request completes, React tries to update the state of an unmounted component. This causes memory leaks and console errors. You can use the browser’s native AbortController to cancel the fetch request if the component unmounts.

import { useState, useEffect } from 'react';

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

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

    async function fetchUserData() {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`, { signal });
        const data = await response.json();
        setUser(data);
      } catch (error) {
        if (error.name !== 'AbortError') {
          console.error("Fetch error:", error);
        }
      }
    }

    fetchUserData();

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

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

2. Eliminate Race Conditions

A race condition occurs when multiple fetch requests are fired in rapid succession, and a slower, older request finishes after a faster, newer request. This causes the UI to display outdated data. Using a boolean flag inside your useEffect ensures only the response from the latest request updates your state.

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

  async function fetchData() {
    const response = await fetch(`https://api.example.com/data/${id}`);
    const result = await response.json();
    if (isCurrent) {
      setData(result);
    }
  }

  fetchData();

  return () => {
    isCurrent = false;
  };
}, [id]);

3. Implement Basic Client-Side Caching

Repeatedly fetching the same data consumes unnecessary bandwidth and slows down the user experience. You can store API responses in a simple cache object outside the component render cycle to serve immediate results for subsequent requests.

const apiCache = {};

function useCachedFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    if (apiCache[url]) {
      setData(apiCache[url]);
      return;
    }

    let isCurrent = true;

    fetch(url)
      .then((res) => res.json())
      .then((result) => {
        if (isCurrent) {
          apiCache[url] = result;
          setData(result);
        }
      });

    return () => {
      isCurrent = false;
    };
  }, [url]);

  return data;
}

4. Debounce Fetch Requests for User Inputs

If you are fetching data based on user input (such as a search bar), fetching on every keystroke floods your API with redundant requests. Debouncing delays the fetch execution until the user stops typing for a specified time duration.

import { useState, useEffect } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (!query) return;

    const delayDebounceFn = setTimeout(() => {
      fetch(`https://api.example.com/search?q=${query}`)
        .then((res) => res.json())
        .then((data) => setResults(data));
    }, 500); // 500ms delay

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

  return (
    <input
      type="text"
      placeholder="Search..."
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}

5. Use Custom Hooks for Clean Separation of Concerns

Rather than writing fetch logic inside individual components, extract the logic into a reusable custom hook. This isolates state management, error handling, loading states, and cleanup logic, making your components cleaner and easier to optimize.

// useFetch.js
import { useState, useEffect } from 'react';

export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

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

    fetch(url, { signal: controller.signal })
      .then((res) => {
        if (!res.ok) throw new Error('Network response was not ok');
        return res.json();
      })
      .then((data) => {
        setData(data);
        setError(null);
      })
      .catch((err) => {
        if (err.name !== 'AbortError') setError(err.message);
      })
      .finally(() => setLoading(false));

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

  return { data, loading, error };
}