React Query in 2022: Why You Should Stop Using useEffect for API Calls

Published at: June 2, 2022

In 2022, React Query has become one of the most popular libraries for managing data fetching and state in React applications. While the native useEffect hook works fine for making API calls, React Query provides a much more powerful and efficient approach to handling server-side data. It simplifies your code, enhances performance, and offers built-in features like caching, automatic background updates, and error handling.

In this blog post, we will explore why you should stop using useEffect for API calls and how React Query can optimize your data-fetching workflow.

1. The Problem with useEffect for API Calls

Many developers use the useEffect hook to make API calls inside their React components. While it works, there are some significant drawbacks:

Manual caching: You have to implement your own caching logic or rely on third-party libraries to avoid refetching data unnecessarily.
Error handling: Error management is more manual when using useEffect, leading to more complex code.
Loading states: Managing loading, error, and success states often leads to boilerplate code that adds to component complexity.
Background updates: You need to implement your own logic to check if data is outdated and trigger re-fetches.

With React Query, all of these concerns are handled for you, freeing you from the need to manually manage data fetching and state.

2. How React Query Improves API Performance

React Query provides several key features that drastically improve your API calls and app performance:

Automatic Caching: React Query automatically caches the data it fetches, so subsequent requests for the same data are served from the cache instead of making a new API call. This significantly reduces network requests and speeds up rendering.
Background Refetching: React Query automatically keeps the data fresh by re-fetching in the background when the data is used again or after a certain interval. This ensures that your app always shows the most up-to-date data without requiring you to handle complex re-fetching logic.
Pagination and Infinite Scrolling: React Query includes built-in support for paginated data and infinite scrolling. It abstracts away much of the complexity of dealing with pagination and provides hooks like useInfiniteQuery for handling large sets of data.

3. Handling Loading, Errors, and Background Updates

One of the main pain points when using useEffect for API calls is managing loading states, errors, and background updates. React Query provides built-in hooks and utilities for these tasks, making the code cleaner and more maintainable.

Loading States

In a typical API call with useEffect, you often manage a loading state manually. React Query abstracts this logic away for you. The useQuery hook, for example, provides the following states:

isLoading: True while the query is being fetched.
isFetching: True when the data is being fetched or re-fetched (even if it’s already cached).
isSuccess: True if the query has completed successfully.
isError: True if there was an error during the fetch.

React Query automatically manages these states for you, reducing the need to manually track loading, error, and success flags in your components.

import { useQuery } from 'react-query';

function fetchPosts() {
  return fetch('/api/posts').then((res) => res.json());
}

function Posts() {
  const { data, error, isLoading, isError } = useQuery('posts', fetchPosts);

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

  return (
    <div>
      {data.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

Error Handling

Error handling is simplified in React Query. If the API request fails, React Query will set the isError flag to true, and you can easily handle the error in your component. React Query also provides error recovery methods such as retrying requests or displaying error messages with ease.

Background Updates

React Query has automatic background fetching, so when data becomes outdated or when refetching is needed, the query will fetch new data in the background. The staleTime option allows you to specify how long data remains fresh before React Query considers it stale and triggers a background refetch.

const { data, isFetching } = useQuery('posts', fetchPosts, {
  staleTime: 1000 * 60 * 5, // Data remains fresh for 5 minutes
});

4. How to Migrate from useEffect to React Query

Migrating from useEffect to React Query is simple and can be done gradually. Below is a step-by-step guide:

Install React Query

First, install React Query in your project:

npm install react-query

Create a Query Function

Move your API call logic into a separate function to be used with React Query.

// api.js
export const fetchPosts = async () => {
  const response = await fetch('/api/posts');
  if (!response.ok) throw new Error('Failed to fetch posts');
  return response.json();
};

Use useQuery in Your Component

Replace the useEffect API call with the useQuery hook. This will automatically handle fetching, caching, and error management.

import { useQuery } from 'react-query';
import { fetchPosts } from './api';

function Posts() {
  const { data, isLoading, isError, error } = useQuery('posts', fetchPosts);

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

  return (
    <div>
      {data.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

Configure Query Parameters (Optional)

You can customize the query further with options like retry behavior, pagination, and background fetching.

5. Real-World Example: Handling Search Inputs with React Query

A common use case where React Query excels is when dealing with search inputs. With React Query, you can trigger a query on each input change and still manage the loading, error, and data fetching states without the need for custom useEffect hooks.

import { useQuery } from 'react-query';

function fetchSearchResults(query) {
  return fetch(`/api/search?q=${query}`).then((res) => res.json());
}

function Search() {
  const [query, setQuery] = React.useState('');
  const { data, isLoading, isError } = useQuery(
    ['searchResults', query],
    () => fetchSearchResults(query),
    { enabled: query.length > 2 } // Only enable the query if the query length is greater than 2
  );

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      {isLoading && <p>Loading...</p>}
      {isError && <p>Error fetching results</p>}
      <ul>
        {data?.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

This example demonstrates how React Query can be used for searching, automatically handling the loading state and errors while also ensuring that background updates are handled efficiently.

6. Conclusion

If you’re still using useEffect for API calls in your React applications, it’s time to consider React Query. Not only does it make data fetching more efficient and easier to manage, but it also handles caching, loading states, error handling, and background updates out of the box. By moving your API calls to React Query, you’ll save time, reduce boilerplate code, and improve the performance of your application.

So, stop using useEffect for API calls, and start enjoying the full potential of React Query for managing your data-fetching workflows!