One library that has caught the attention of many React developers when it comes to handling server state is React Query. We put together this post to give you an overview of it.

Basic overview of React Query

React Query is more than just a data-fetching library for React. It synchronizes, caches, and updates server data, removing the complexities of global state management you might encounter when using Redux or Mobx.

Key features

Automatic caching

When you fetch data using React Query, it automatically caches the results. This ensures that if the same data is requested again, it is retrieved from the cache instead of making an unnecessary network request, leading to a faster user experience.

Background data synchronization

React Query can refetch data in the background when the user focuses on your application or comes back online, ensuring that the information the user sees is always up to date.

Pagination and infinite scrolling

With React Query, pagination or implementing infinite scroll is way more straightforward. The library provides built-in mechanisms to handle these patterns seamlessly.

Devtools

React Query comes with its own set of Devtools, making it easier for developers to inspect queries, cache, and manage the library's state during development.

Why use React Query?

Separation of concerns

React Query distinguishes between server state (data residing on the server) and UI state (e.g., button toggles, modal states).

While global state management tools can handle both, using React Query for server state simplifies the landscape. This means you can use React's local state or context for UI state and React Query for server data.

Less boilerplate

Anyone who has worked with Redux knows the amount of boilerplate code it can introduce. React Query minimizes this by offering a more direct API to manage server state.

Better performance

With features like automatic caching and background syncing, React Query ensures that your application remains performant by reducing unnecessary network requests and always providing fresh data to the users.

How does React Query work?

At its heart, React Query provides a set of custom hooks, the most fundamental of which is useQuery.

Here's a basic example:

import { useQuery } from 'react-query';

function FetchData() {
    const { data, error, isLoading } = useQuery('todos', fetchTodoList);

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

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

In the above example, useQuery takes in a unique key 'todos' and a fetch function fetchTodoList. It then returns an object containing data, an error object, and a loading boolean which can be used to conditionally render your UI based on the fetch state.

Alternatives to React Query

There are a couple of other libraries that also simplify server state management.

Fetch

The Fetch API gives you a simple way to fetch resources. It's native to modern browsers, which means you don’t need to install or import anything.

Differences between Fetch and React Query

• Simplicity: Fetch is a low-level API for making network requests, whereas React Query provides a higher-level abstraction with automatic caching, retries, and other features out-of-the-box.
• Caching: With Fetch, caching data requires additional manual implementation, unlike React Query which caches data automatically.
• State management: Fetch only handles the request and response. React Query, on the other hand, provides hooks that automatically handle data, errors, and loading states.

Apollo Client

Apollo is a solid choice for interacting with GraphQL APIs. It offers a comprehensive suite for managing both local and server state.

Differences between Apollo Client and React Query

• GraphQL vs. REST: Apollo Client is tailored for GraphQL, while React Query can work with any kind of API but is often used with RESTful services.
• State Management: Apollo Client comes with built-in local state management, making it a one-stop-shop for both server and client state. React Query focuses primarily on server state.
• Devtools: Both offer development tools, but they are tailored to their respective ecosystems.

SWR

SWR stands for Stale While Revalidate. It’s a lightweight data-fetching library by Vercel that also uses the "stale while revalidate" caching strategy.

Differences between SWR and React Query

• Revalidation Strategy: Both React Query and SWR use a similar caching strategy, but React Query offers more configuration options out-of-the-box.
• API: SWR has a simpler API that focuses on fetching, caching, and revalidating. React Query provides a broader set of tools, including mutations and more complex query configurations.

Axios

Axios is a promise-based HTTP client for making network requests.

Differences between Axios and React Query

• Usability: Axios is primarily designed for making HTTP requests and handling responses, while React Query offers a holistic approach to data synchronization, caching, and error retries.
• Interceptors: One advantage of Axios is its interceptors, allowing developers to transform requests and responses or handle global request/response logic.
• Caching: Like Fetch, caching in Axios requires additional implementation, unlike React Query's built-in caching mechanism.

A final word on alternatives

Choosing between React Query and its alternatives boils down to the specific needs of your project. If you need a simple request-response mechanism, Fetch or Axios might be enough. But React Query or Apollo Client might be better if you need extensive data management capabilities or automatic caching and background synchronization.

Conclusion

React Query offers a fresh perspective on managing server state in React applications. Instead of juggling with global state management tools for all kinds of state, React Query proposes that server data deserves special treatment. With built-in caching, background synchronization, and an array of other features, it not only simplifies the developer experience but also enhances the end-user experience.

As with any library or tool, the key is understanding when and where to use it. If your application heavily interacts with server data and you want to optimize that aspect, giving React Query a try might be a great idea.