React Query: The Modern Solution for Managing Server State in React Applications

Introduction

React Query is a powerful open-source library designed for managing server state in React applications. It streamlines data fetching, caching, and synchronization, addressing the complexities associated with handling asynchronous data in modern web development. Notable for its ability to simplify these processes compared to traditional state management solutions like Redux, React Query has gained widespread adoption among developers for enhancing the efficiency and performance of applications reliant on API interactions.

React Query: It’s Time to Break up with your "Global State”!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
Top Content
Global state management and the challenges of placing server state in global state are discussed. React Query is introduced as a solution for handling asynchronous server state. The Talk demonstrates the process of extracting logic into custom hooks and fixing issues with state and fetching logic. Optimistic updates with mutation are showcased, along with the benefits of using React Query for data fetching and mutations. The future of global state management is discussed, along with user feedback on React Query. The Talk concludes with an invitation to explore React Query for server state management.

As Tanner Linsley, the creator of React Query, explained in his talk "React Query: It's Time to Break up with your 'Global State'!", "An increasing amount of data in our React applications is coming from remote and asynchronous sources and, even worse, continues to masquerade as 'global state'." This insight highlights a fundamental misunderstanding that React Query aims to address—the confusion between client state and server state.

Developed initially to alleviate the challenges of state management, React Query emerged from community discussions emphasizing the need for a user-friendly approach that could seamlessly integrate with React's component-based architecture. Its features, including automatic data caching and background fetching, enable developers to manage server state effortlessly, thus reducing boilerplate code and enhancing user experience.

History

React Query was developed to address the challenges of state management in React applications, particularly concerning the handling of asynchronous data. Its inception arose from the need for a more efficient and user-friendly approach to state management beyond traditional libraries like Redux.

The background of its development can be traced to various discussions among developers working on greenfield projects, where selecting an appropriate tech stack was crucial. One significant project at a company allowed developers to collaborate on a Request for Comment (RFC), highlighting the importance of making informed decisions about state management tools.

During these discussions, developers explored various alternatives for managing state in React applications, such as Redux, MobX, and native hooks (a combination of useReducer and useContext). While Redux was the primary choice for existing applications, developers recognized the limitations it posed, especially in managing asynchronous operations efficiently.

Stop Abusing Client State Management
React Summit 2022React Summit 2022
21 min
Stop Abusing Client State Management
This Talk discusses state management abuse and the use of React Query for API handling in React applications. The speaker demonstrates implementing loading indicators, custom hooks, caching mechanisms, and introduces React Query as a powerful tool for fetching, caching, and loading data. The conclusion emphasizes that React Query simplifies API handling without the need for complex state management tools like Redux or MobX.

As Nir Parisian demonstrated in his talk "Stop Abusing Client State Management", many React applications misuse state management solutions like Redux or MobX primarily for server state management, handling loading indicators, error states, and API data. Parisian emphasizes that approximately 70% of application state is actually server state, which requires a specialized approach.

Features

React Query provides a robust set of features designed to simplify data fetching and state management in React applications. It significantly enhances the experience of handling asynchronous data, particularly when compared to traditional methods like useEffect.

Data Caching

One of the standout features of React Query is its automatic data caching. When a query is executed, the fetched data is stored in memory, which allows for instant retrieval on subsequent requests. For example, if a user makes a request for the same data within a short timeframe, React Query will return the cached result immediately, avoiding unnecessary API calls. This caching behavior is beneficial for performance and user experience.

In Tanner Linsley's workshop "Rethinking Server State with React Query", he demonstrates how React Query caches data, making it immediately available when revisiting a component. This eliminates the need for loading indicators when navigating between views, enhancing the user experience by leveraging user interactions and providing instant access to cached data.

Background Fetching

React Query supports background fetching, which updates the cached data when a component mounts or when a query's key changes. This ensures that users always see the most current data without requiring a manual refresh. The library intelligently manages the timing and conditions under which data is fetched, significantly reducing the boilerplate code typically required for these operations.

Thomas Findlay, in his workshop "Best Practices and Patterns for Managing API Requests and States", highlights how React Query handles background fetching and state management. He notes that "React Query handles state management, API states, and abort logic, making our code leaner."

Configuration Options

React Query offers various configuration options for fine-tuning the behavior of queries.

  • cacheTime: Determines how long data remains fresh in the cache even if it's not actively being used.
  • staleTime: Specifies the duration before data is considered stale, prompting a background fetch for updates.
  • refetchOnWindowFocus: Enables automatic data refresh whenever the user returns to the window, ensuring data remains up-to-date.
Thinking in React Query
React Summit 2023React Summit 2023
22 min
Thinking in React Query
Top Content
Watch video: Thinking in React Query
React Query is not a data fetching library, but an Asian state manager. It helps keep data up to date and manage agent life cycles efficiently. React Query provides fine-grained subscriptions and allows for adjusting stale time to control data fetching behavior. Defining stale time and managing dependencies are important aspects of working with React Query. Using the URL as a state manager and Zustand for managing filters in React Query can be powerful.

As Dominik Dorfmeister explains in his talk "Thinking in React Query", staleTime is a crucial concept for understanding React Query's behavior: "When using ReactQuery, it will automatically re-fetch queries based on certain triggers, but it will only do this for queries that are considered stale. Stale time, which defines the time until data goes stale, can be adjusted to control this behavior."

Synchronous vs. Asynchronous State Management

React Query distinguishes between client state and server state. Client state is immediate and mutable only by the client, while server state comes from an external source, such as an API, and requires fetching. This distinction allows developers to manage these different types of state effectively within their applications.

Return Values

When using the useQuery hook, React Query returns an object containing essential properties that help manage the state of the query:

  • status: Indicates if the query is loading, has encountered an error, or was successful.
  • error: Provides any error information that occurred during the fetch.
  • data: Contains the data retrieved from the server.
  • isFetching: A boolean indicating whether the query is currently fetching data.

These features collectively position React Query as a powerful solution for managing server state in React applications, streamlining the development process while improving performance and user experience.

Installation and Setup

To begin using React Query, it is essential to ensure that your development environment is prepared with the necessary dependencies.

Prerequisites

Before installing React Query, make sure you have the following prerequisites in place:

  • A basic understanding of JavaScript syntax
  • Familiarity with React
  • Knowledge of how to work with APIs
  • Node.js installed

Installing React Query and Axios

Navigate to your React project directory using your terminal and install React Query along with Axios for making HTTP requests:

npm install react-query axios

After the installation is complete, you will need to set up React Query in your application. Open your index.js file and add the following:

import React from "react";  
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();
ReactDOM.render(


,
document.getElementById('root')
);

This setup allows React Query to manage server state in your application effectively.

Fetch, useEffect, React Query, SWR, what else?
React Advanced 2023React Advanced 2023
102 min
Fetch, useEffect, React Query, SWR, what else?
Top Content
This workshop covers data fetching strategies in JavaScript, focusing on Fetch API, Axios, SWR, and React Query. It provides examples and guidance on implementing these strategies in a React application. Troubleshooting and deployment issues, such as CORS, are also addressed. The workshop concludes by highlighting the advantages and use cases of SWR and React Query, and encourages participants to choose the best strategy based on their project's needs.

Ondrej Polesny in his workshop "Fetch, useEffect, React Query, SWR, what else?" demonstrates this setup process and compares different data fetching strategies. He explains that "SWR and React Query handle data fetching and provide features such as loading and error state handling, retry policy configuration, request deduplication, automatic revalidation, and paging and prefetching."

Installing GraphQL Codegen (Optional)

If you are using GraphQL in your project, you may want to utilize GraphQL Codegen for type-safe data fetching:

yarn add graphql  
yarn add --dev @graphql-codegen/cli @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-query

Create a script in your package.json:

"scripts": {  
"generate": "graphql-codegen"
}

Finally, configure your codegen.yml file to specify schemas, operations, and the desired output for generated types:

schema: "./graphql/schema.graphql"  
documents:
- "./graphql/queries/**/*.graphql"
- "./graphql/mutations/**/*.graphql"
generates:
./src/_generated.ts:
plugins:
- typescript
- typescript-operations
- typescript-react-query
config:
defaultScalarType: unknown
skipTypename: true
fetcher:
endpoint: "https://graphqlzero.almansi.me/api"
fetchParams:
headers:
content-type: "application/json"

This configuration will help streamline your GraphQL data fetching alongside React Query, providing type safety and better integration within your React applications.

Usage

React Query is a powerful library designed to simplify data fetching in React applications. It streamlines the process of managing server state and provides tools for caching, synchronizing, and updating data in a React-friendly way.

Data Fetching

Data fetching in React traditionally involves the use of useEffect combined with state management via useState. However, React Query abstracts this complexity. It provides a straightforward API that handles loading states, caching, and error handling, significantly reducing boilerplate code associated with fetching data.

When using React Query, a component can fetch data as follows:

const { isLoading, error, data } = useQuery('githubUser', fetchGithubUser);

Here, useQuery is used to initiate a fetch operation, where the first argument is a unique query key (in this case, 'githubUser') and the second is the function that performs the fetch. React Query automatically manages loading states and caches the response for quick access.

Tanner Linsley's talk "Let's Build React Query in 150 Lines of Code!" demystifies the internals of React Query by building a simplified version of the library. He demonstrates that at its core, React Query is about creating a query client, managing a cache, and providing a subscription model that updates components when data changes.

Query Keys and Caching

A key feature of React Query is its query key system, which acts as a unique identifier for each query. This is important for caching purposes, allowing the library to efficiently manage multiple queries that might depend on different variables. For instance, if a query key remains unchanged and a subsequent request is made, React Query will serve the cached data immediately, while simultaneously updating it in the background with the latest data from the server.

As Dominik Dorfmeister highlights in his talk "Thinking in React Query", parameters should be treated as dependencies and added to the query key: "This ensures separate caching, enables automatic refetches, and avoids problems with stale closures."

Managing Query State

React Query provides various hooks that enable developers to manage the state of queries effectively. For example, the QueryClient can be used to invalidate queries, marking them as stale and refetching them when necessary. This intelligent caching mechanism allows developers to ensure that users always receive up-to-date information without incurring unnecessary server calls.

Simplified Syntax and Handling States

In traditional data fetching methods, developers often face challenges like managing loading states and error handling explicitly. React Query encapsulates these concerns, allowing developers to write cleaner code:

if (isLoading) return ;  
if (error) return ;
return ;

This approach minimizes the risk of UX issues, such as cumulative layout shifts, which can arise from handling loading states improperly.

Thomas Findlay, in his workshop on API requests, demonstrates how to provide meaningful feedback during API requests using React Query. He explains that "to provide meaningful feedback for users during API requests, it's important to display loading and error messages. Giving users a clear path of action, such as clicking on a retry button, helps them navigate any issues."

Integration

Overview

Integrating React Query into a React application enhances data fetching, caching, and state management, providing a robust solution for modern web development. Its declarative API and seamless integration with React components make it a preferred choice for managing server state in both simple and complex applications.

Steps for Integration

Installation

To begin using React Query, the first step is to install the library in your project:

npm install react-query

or

yarn add react-query

Configuration

Once installed, React Query must be configured to work within your application. This involves setting up a QueryClient and wrapping your application in a QueryClientProvider:

import { QueryClient, QueryClientProvider } from 'react-query';  
const queryClient = new QueryClient();
function App() {
return (

{/* Your app components go here */}

);
}

Fetching Data

With React Query configured, you can start fetching data. The useQuery hook is used to fetch data from an API:

import { useQuery } from 'react-query';  
const fetchTodos = async () => {
const response = await fetch('/api/todos');
return response.json();
};
function Todos() {
const { data, error, isLoading } = useQuery('todos', fetchTodos);
if (isLoading) return
Loading...
;
if (error) return
Error loading todos
;
return (


{data.map(todo => (

{todo.title}
))}

);
}

Using with GraphQL

React Query can also be integrated with GraphQL-based applications, allowing for effective data management in a GraphQL context. Developers can follow similar steps as with REST APIs, adjusting their fetching logic to use GraphQL queries:

import { useQuery } from 'react-query';  
import { request } from 'graphql-request';
const endpoint = 'https://api.example.com/graphql';
const fetchTodos = async () => {
const { todos } = await request(endpoint, '{ todos { id title } }');
return todos;
};
function Todos() {
const { data, error, isLoading } = useQuery('todos', fetchTodos);
if (isLoading) return
Loading...
;
if (error) return
Error loading todos
;
return (


{data.map(todo => (

{todo.title}
))}

);
}
React Query and Auth: Who is Responsible for What?
React Advanced 2021React Advanced 2021
19 min
React Query and Auth: Who is Responsible for What?
Top Content
This talk introduces React Query and Auth, discussing how React Query maintains server state on the client and handles mutations and data updates. The day spa app example demonstrates the use of React Query to fetch data and handle user authentication. React Query is also useful for managing user data and ensuring accurate data from the server. The talk highlights the importance of addressing the three main players in user data: React Query, Auth Functions, and persistence across sessions.

Bonnie Schulkin's talk "React Query and Auth: Who is Responsible for What?" addresses the specific integration challenge of handling user authentication. She proposes a data flow with custom hooks for both auth and React Query to manage authentication status and user profile updates, demonstrating how React Query can seamlessly fit into authentication workflows.

Benefits of Integration

Integrating React Query into a React application brings numerous benefits, such as:

  • Declarative Data Fetching: The library simplifies data fetching with a declarative approach, enhancing code readability and maintainability.
  • Automatic Caching: React Query automatically caches fetched data, optimizing application performance by minimizing unnecessary network requests.
  • Simplicity in State Management: It alleviates complexities in managing application state by providing a consistent way to handle server state and client state separately, which can lead to cleaner code and improved development experience.

Comparison to Other Libraries

React Query is often compared with state management libraries like Redux, MobX, and Zustand, each serving different purposes in a React application. The primary distinction lies in their focus on data management—React Query is optimized for data fetching, caching, and synchronization, particularly in applications with frequent API calls, while libraries like Redux are better suited for complex state management that requires synchronization across multiple components.

Use Cases

React Query excels in scenarios where an application needs to perform a significant amount of data fetching from APIs. It is designed to handle the complexities of data management from servers, such as caching, automatic updates, and background synchronization. Therefore, if the main function of an application is to display data from APIs, React Query is often the preferred choice.

Conversely, Redux is typically chosen when an application has complex state management needs, especially when there's a need to share state between various components or manage intricate client-side logic.

Simplifying Data Management in React With React Query
React Advanced 2023React Advanced 2023
16 min
Simplifying Data Management in React With React Query
Watch video: Simplifying Data Management in React With React Query
Today's talk introduces React Query, a library that simplifies data management in React applications. It covers the core concepts and features of React Query, including data fetching, caching, and mutation. The talk also discusses query invalidation and cache time, highlighting how React Query optimizes performance and reduces code complexity.

Harsh Shah, in his talk "Simplifying Data Management in React With React Query", explains that "React Query provides hooks like UseQuery and QueryClientProvider for fetching data" and highlights how it handles loading and error state handling, retry policy configuration, request deduplication, automatic revalidation, and paging and prefetching.

Client State vs. Server State

A critical distinction made in discussions around state management in React applications is the separation of client state and server state. React Query functions primarily as a server state library, handling data fetched from APIs and caching the responses for efficient access. This aspect of React Query allows developers to avoid unnecessary data fetching and manage loading states more effectively.

In contrast, Redux acts as a client state library, storing locally created data and UI states, which can include elements like active routes, selected tabs, and spinners. This delineation helps developers choose the right tool based on whether their needs pertain to server or client state management.

React Query: It’s Time to Break up with your "Global State”!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
Top Content
Global state management and the challenges of placing server state in global state are discussed. React Query is introduced as a solution for handling asynchronous server state. The Talk demonstrates the process of extracting logic into custom hooks and fixing issues with state and fetching logic. Optimistic updates with mutation are showcased, along with the benefits of using React Query for data fetching and mutations. The future of global state management is discussed, along with user feedback on React Query. The Talk concludes with an invitation to explore React Query for server state management.

Tanner Linsley, in his talk "React Query: It's Time to Break up with your 'Global State'!", emphasizes this distinction: "When server state and client state are stored in the same system, tradeoffs are made. Server state has unique challenges that require dedicated tools."

Performance Considerations

When considering performance, React Query often outshines traditional state management libraries in scenarios that demand efficient API interactions. It provides built-in mechanisms for caching and synchronization, reducing the overhead often associated with manual state management in Redux.

However, for applications requiring intricate control over the application state and complex interactions, Redux may still hold an advantage despite its potentially higher complexity and boilerplate code requirements.

Best Practices

Performance Optimization

Performance optimization techniques, such as debouncing requests and utilizing background refetching, can significantly enhance user experience. Understanding the strengths and potential drawbacks of both React Query and GraphQL can lead to the development of applications that are not only performant but also deliver excellent user experiences.

Implementing strategies like automatic refetching of stale data can ensure that users always have the most current information available without manual intervention. By adhering to these best practices, developers can maximize the efficiency and effectiveness of React Query in their applications, ensuring a smooth and responsive user experience.

Best Practices and Patterns for Managing API Requests and States
React Advanced 2022React Advanced 2022
206 min
Best Practices and Patterns for Managing API Requests and States
Premium
The Workshop covers best practices and patterns for managing API requests in states. It is divided into three parts: fetching and posting data with Axios, implementing the API layer and React Query, and using React Query for API requests. The Workshop also discusses request cancellation, providing meaningful feedback during API requests, and implementing loaders and pagination. The API layer approach separates API logic from components, making it easier to maintain and extend the codebase. React Query offers features like caching and deduping requests, improving the handling of API requests.

Thomas Findlay, in his workshop "Best Practices and Patterns for Managing API Requests and States", demonstrates the implementation of request cancellation to prevent race conditions: "We need to implement request cancellation to prevent race conditions where responses arrive out of order due to the unreliability of the Internet and multiple servers handling API requests."

Caching Strategies

One of the fundamental best practices when using React Query is to leverage its powerful caching mechanism. Caching allows frequently accessed data to be stored temporarily in an easily retrievable format, reducing the need for redundant API calls and enhancing performance. React Query provides options for caching data in memory, local storage, or other storage solutions, ensuring that applications can operate efficiently even with fluctuating network conditions.

Query Configuration

When configuring queries, it's essential to utilize query keys effectively. A query key serves as a unique identifier for a specific query instance, which aids in caching and data management. By using arrays for query keys, developers can specify multiple keys when needed, making it easier to manage dependencies between different data points.

Data Fetching and State Management

In React Query, the useQuery hook is critical for data fetching and managing the associated state. It returns several properties such as data, error, isLoading, and status, which provide a comprehensive view of the current state of the query. It is recommended to deconstruct these properties to simplify usage and enhance readability in components:

const { data, status } = useQuery("users", fetchUsers);

By doing this, developers can efficiently access and display data in their components while managing loading and error states seamlessly.

Handling Errors

Error handling is another crucial aspect of using React Query. The library manages errors internally, allowing developers to implement robust error handling strategies without excessive boilerplate code. It's best to ensure that the UI responds appropriately to different error states, providing users with clear feedback when issues arise.

Tanner Linsley, in his workshop "Rethinking Server State with React Query", demonstrates error handling techniques and emphasizes the importance of providing clear error messages and retry options to users.

Community and Ecosystem

React Query has established a vibrant community and ecosystem that supports developers in building robust applications. The library is widely recognized as an essential tool for modern React applications, offering solutions for both data fetching and state management, making it suitable for projects ranging from simple applications to complex systems.

Adoption and Use Cases

The adoption of React Query is evident in various development environments, as many teams opt for it to handle state management efficiently. For instance, during a greenfield project, developers had the freedom to choose their technology stack. While some considered Redux and other state management libraries, React Query was presented as a compelling alternative, primarily due to its ability to simplify front-end and back-end communication.

Users have reported that React Query significantly reduces boilerplate code and complexity compared to traditional approaches like Redux, making it more beginner-friendly and easier to maintain.

Let's Build React Query in 150 Lines of Code!
React Summit Remote Edition 2021React Summit Remote Edition 2021
30 min
Let's Build React Query in 150 Lines of Code!
Top Content
React Query is a popular data synchronization library used by indie developers, startups, and Fortune 500s, with over 1,200 commits and 250 contributors. The Talk covers the creation of a simplified version of React Query called React Query Lite. It explores concepts like caching, background fetching, and garbage collection. The speaker also discusses the use of query observers and the integration of React Query with React. The Talk concludes with a discussion on React Native tools, testing, and the stability of React Query's API.

Tanner Linsley, creator of React Query, shared in his talk "Let's Build React Query in 150 Lines of Code!" that "React Query has gained significant popularity and is widely adopted. It has received over 1,200 commits from 250 contributors and is being used by indie developers, startups, and Fortune 500s."

Documentation and Resources

Comprehensive documentation is available for React Query, guiding developers through its core concepts and effective usage. This resource is vital for both new users and seasoned developers seeking to leverage advanced features of the library. Community-generated articles and tutorials further enrich the ecosystem, helping users navigate common challenges in data fetching within the React ecosystem.

Continuous Evolution

The React Query ecosystem is continually evolving, reflecting the rapid pace of development in the React community. As the library matures, it integrates feedback from users, enhancing its functionality and usability. This dynamic nature ensures that developers are equipped with the latest tools and best practices for state management and data handling.

Challenges and Misconceptions

Common Misconceptions

React Query, like many technologies, is surrounded by various misconceptions that can hinder its effective use. One prevalent misunderstanding is the belief that Server Components should always be preferred, while Client Components should only be utilized sparingly. This view can lead to an improper assessment of when to leverage each component type for optimal performance and user experience.

Another misconception is related to the way the use client directive is interpreted. Developers often misinterpret its purpose, which can lead to ineffective component structuring and suboptimal application performance. This misconception underscores the importance of understanding the architecture of React and the roles of different component types.

Thinking in React Query
React Summit 2023React Summit 2023
22 min
Thinking in React Query
Top Content
Watch video: Thinking in React Query
React Query is not a data fetching library, but an Asian state manager. It helps keep data up to date and manage agent life cycles efficiently. React Query provides fine-grained subscriptions and allows for adjusting stale time to control data fetching behavior. Defining stale time and managing dependencies are important aspects of working with React Query. Using the URL as a state manager and Zustand for managing filters in React Query can be powerful.

Dominik Dorfmeister clarifies a common misconception in his talk "Thinking in React Query": "React Query is not a data fetching library. It's an async state manager." This distinction helps developers understand the true purpose of React Query and how to leverage it effectively.

The 5 O'Clock Rule

A significant factor contributing to the popularity of certain technologies, including React Query, can be attributed to what is referred to as The 5 O'Clock Rule. This theory posits that the level of abstraction in solving a problem will rise until it enables the average developer to disengage from the problem, often prioritizing the completion of their tasks over the elegance or flexibility of the solution.

The notion here is that what ultimately matters to many developers is the ability to close their Jira tickets and leave work on time. While this may seem harsh, the reality is that popular abstractions often cater to this need. For example, a library like is-string, which garners millions of downloads weekly, exemplifies the success that can be achieved when a tool meets this rule.

Conversely, when an abstraction is both effective and elegant, it can create a transformative experience for developers, thereby gaining rapid adoption.

Integration Challenges

Despite its advantages, React Query is not without its challenges. One issue is that it lacks a non-hook mechanism for triggering mutation requests, which can complicate scenarios where a straightforward approach would be beneficial.

Additionally, the library focuses primarily on managing asynchronous data fetches, contrasting with state management libraries that emphasize synchronous updates. This distinction requires developers to understand the best use cases for each library to avoid redundancy in their code.

Moreover, integrating RESTful APIs with React can enhance the functionality of web applications by enabling dynamic data fetching and updating. However, for more complex requirements, developers may need to transition from REST to GraphQL, which can introduce its own set of learning curves and integration challenges.

Bonnie Schulkin addresses integration challenges with authentication in her talk "React Query and Auth: Who is Responsible for What?". She explains that "There's a security issue when updating treatments by authorized users. React Query can update data on startup and handle the user data update process," highlighting the need for careful consideration of authentication within React Query implementations.

Conclusion

React Query represents a significant evolution in state management for React, empowering developers to create responsive, data-driven applications while addressing the intricacies of asynchronous operations. Its growing ecosystem and community support further solidify its position as a leading choice in modern web development frameworks.

As summarized by Tanner Linsley in his workshop "Rethinking Server State with React Query", "React Query handles global state management automatically without the need for reducers or global action handlers." This encapsulates the paradigm shift that React Query brings to the React ecosystem, moving away from traditional state management approaches towards a more focused, efficient solution for handling server state.

By understanding the core concepts of React Query and implementing best practices, developers can significantly enhance the performance, maintainability, and user experience of their React applications.

09 May, 2025

FAQ

React Query is used for efficient data fetching and state management in React applications, simplifying the handling of server state.

React Query enhances performance through features like caching, background fetching, and optimistic updates, reducing the need for complex state management solutions.

Yes, React Query can be integrated with authentication systems to manage user data and authentication status efficiently.

React Query is particularly beneficial for applications that require complex data-fetching scenarios and efficient server state management.

React Query uses intelligent caching strategies to ensure data is fetched efficiently and kept up-to-date, minimizing unnecessary network requests.

Learn more about the topic from these talks

Let's Build React Query in 150 Lines of Code!
React Summit Remote Edition 2021React Summit Remote Edition 2021
30 min
Let's Build React Query in 150 Lines of Code!
Top Content
React Query is a popular data synchronization library used by indie developers, startups, and Fortune 500s, with over 1,200 commits and 250 contributors. The Talk covers the creation of a simplified version of React Query called React Query Lite. It explores concepts like caching, background fetching, and garbage collection. The speaker also discusses the use of query observers and the integration of React Query with React. The Talk concludes with a discussion on React Native tools, testing, and the stability of React Query's API.
Rethinking Server State with React Query
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
React Query: It’s Time to Break up with your "Global State”!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
Top Content
Global state management and the challenges of placing server state in global state are discussed. React Query is introduced as a solution for handling asynchronous server state. The Talk demonstrates the process of extracting logic into custom hooks and fixing issues with state and fetching logic. Optimistic updates with mutation are showcased, along with the benefits of using React Query for data fetching and mutations. The future of global state management is discussed, along with user feedback on React Query. The Talk concludes with an invitation to explore React Query for server state management.
React Query and Auth: Who is Responsible for What?
React Advanced 2021React Advanced 2021
19 min
React Query and Auth: Who is Responsible for What?
Top Content
This talk introduces React Query and Auth, discussing how React Query maintains server state on the client and handles mutations and data updates. The day spa app example demonstrates the use of React Query to fetch data and handle user authentication. React Query is also useful for managing user data and ensuring accurate data from the server. The talk highlights the importance of addressing the three main players in user data: React Query, Auth Functions, and persistence across sessions.
Stop Abusing Client State Management
React Summit 2022React Summit 2022
21 min
Stop Abusing Client State Management
This Talk discusses state management abuse and the use of React Query for API handling in React applications. The speaker demonstrates implementing loading indicators, custom hooks, caching mechanisms, and introduces React Query as a powerful tool for fetching, caching, and loading data. The conclusion emphasizes that React Query simplifies API handling without the need for complex state management tools like Redux or MobX.
Best Practices and Patterns for Managing API Requests and States
React Advanced 2022React Advanced 2022
206 min
Best Practices and Patterns for Managing API Requests and States
Workshop
Thomas Findlay
Thomas Findlay
With the rise of frameworks, such as React, Vue or Angular, the way websites are built changed over the years. Modern applications can be very dynamic and perform multiple API requests to populate a website with fresh content or submit new data to a server. However, this paradigm shift introduced new problems developers need to deal with. When an API request is pending, succeeds, or fails, a user should be presented with meaningful feedback. Other problems can comprise API data caching or syncing the client state with the server. All of these problems require solutions that need to be coded, but these can quickly get out of hand and result in a codebase that is hard to extend and maintain. In this workshop, we will cover how to handle API requests, API states and request cancellation by implementing an API Layer and combining it with React-Query.
Prerequisites: To make the most out of this workshop, you should be familiar with React and Hooks, such as useState, useEffect, etc. If you would like to code along, make sure you have Git, a code editor, Node, and npm installed on your machine.
Thinking in React Query
React Summit 2023React Summit 2023
22 min
Thinking in React Query
Top Content
Watch video: Thinking in React Query
React Query is not a data fetching library, but an Asian state manager. It helps keep data up to date and manage agent life cycles efficiently. React Query provides fine-grained subscriptions and allows for adjusting stale time to control data fetching behavior. Defining stale time and managing dependencies are important aspects of working with React Query. Using the URL as a state manager and Zustand for managing filters in React Query can be powerful.
Simplifying Data Management in React With React Query
React Advanced 2023React Advanced 2023
16 min
Simplifying Data Management in React With React Query
Watch video: Simplifying Data Management in React With React Query
Today's talk introduces React Query, a library that simplifies data management in React applications. It covers the core concepts and features of React Query, including data fetching, caching, and mutation. The talk also discusses query invalidation and cache time, highlighting how React Query optimizes performance and reduces code complexity.
Fetch, useEffect, React Query, SWR, what else?
React Advanced 2023React Advanced 2023
102 min
Fetch, useEffect, React Query, SWR, what else?
Top Content
WorkshopFree
Ondrej Polesny
Ondrej Polesny
In this workshop, first, we’ll go over the different ways you can consume APIs in React. Then, we’ll test each one by fetching content from a headless CMS (with both REST and GraphQL) and checking in detail how they work.
While there is no advanced React knowledge required, this is going to be a hands-on session, so you’ll need to clone a preconfigured GitHub repository and utilize your preferred React programming editor, like VS Code.
You will learn:- What diverse data fetching options there are in React- What are advantages and disadvantages of each- What are the typical use cases and when each strategy is more beneficial than others