How to Handle API Requests in React When User Navigates Before Completion?

Introduction

When developing React applications, it's often necessary to load data from the server when a page is opened. However, if the user navigates away before the API request completes, this can lead to state issues and memory leaks. This article will explore various approaches to solving this problem and select the most suitable one for a typical React application.

Cancelling Requests with AbortController

One way to prevent updating the state after the component has been unmounted is by using AbortController. This method allows you to cancel a request if the component is unmounted before completion.

Code Example

import { useEffect, useState } from 'react';
import { abortController } from 'abortcontroller-polyfill/dist/abortcontroller-polyfill.min';

function MyComponent() {
  const [data, setData] = useState(null);
  const controller = new AbortController();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/data', { signal: controller.signal });
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setData(data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();

    return () => {
      controller.abort(); // Cancel the request when the component is unmounted
    };
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
    </div>
  );
}

export default MyComponent;

Practical Tip

Using AbortController helps avoid state issues and memory leaks. However, it's important to remember that each request should have its own unique AbortController to avoid accidentally cancelling other requests.

Simple Ignoring of Response After Unmounting

If you are certain that the user won't return to the page where the request was made, you can simply ignore the response after the component is unmounted. This approach is simple and effective but may result in data loss if the user returns to the page.

Code Example

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/data');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setData(data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();

    return () => {}; // The unmount function is not needed as the response is ignored
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
    </div>
  );
}

export default MyComponent;

Practical Tip

This method is simple and easy to implement, but it doesn't guarantee data preservation. If you plan to use this page in the future, it's better to use more reliable methods.

Caching the Response

If you want to save the response for future use, you can cache it. This will help avoid repeated API calls and speed up data loading when the user returns to the page.

Code Example

import { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [cachedData, setCachedData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/data');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setCachedData(data); // Cache the data
        setData(data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();

    return () => {}; // The unmount function is not needed as data is cached
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
    </div>
  );
}

export default MyComponent;

Practical Tip

Caching data can significantly improve your application's performance, especially if the data does not change frequently. However, it's important to manage the cache and clear it when necessary.

Using Data Libraries

If you need more functionality and control over the data loading process, you can use libraries such as React Query or SWR. These libraries provide convenient tools for managing data state and handling errors.

Code Example with React Query

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

function MyComponent() {
  const { data, error, isLoading } = useQuery({
    queryKey: ['data'],
    queryFn: async () => {
      const response = await fetch('/api/data');
      if (!response.ok) throw new Error('Network response was not ok');
      return response.json();
    },
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default MyComponent;

Practical Tip

Using data libraries allows you to focus on your application's business logic rather than the details of state management and error handling. This is particularly useful for large and complex projects.

Conclusion

Depending on your requirements and usage context, you can choose one of the proposed methods for handling API requests in React when the user navigates before the request completes. Using AbortController is a good choice for preventing state updates after component unmounting, while caching data and using data libraries can ensure higher performance and usability.