Log in
React Conferences
React Summit 2020React Summit 2020
Top
EN

Rethinking Server State with React Query

Tanner Linsley
Tanner Linsley
Nozzle.io
certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Get Multipass
Rate this content
Bookmark

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.

This workshop has been presented at React Summit 2020, check out the latest edition of this React Conference.

FAQ

React Query is a library for fetching data in React applications, focusing on managing server state. It addresses challenges like caching, synchronization, and updating server state, differing from tools designed for client state management.

As of its first anniversary, React Query has gained significant traction with 13,000 stars on GitHub, nearly two million downloads on NPM, and contributions from 188 developers.

Key features of React Query include efficient data fetching, caching, automatic background updates, and integration with server states without the need for global state management tools like Redux.

React Query solves problems related to managing asynchronous server state in React applications, such as caching strategies, handling pagination and infinite scrolling, and data synchronization.

Yes, React Query can be used with any asynchronous data fetching method, including REST and GraphQL. It is agnostic of the backend technology.

Client state involves data managed within the browser, often related to UI states like toggled elements or form inputs. Server state is data managed on the server, such as database entries, which the client might need to request and synchronize.

React Post enhances user experience by reducing loading times through efficient data caching and background updating, leading to smoother interactions and less waiting for data fetching.

Yes, there is an official React Query Essentials course available which covers in-depth concepts and practical usage of React Query to manage server state in React applications.

react querystate managementserver state reactreact state managementreact
Tanner Linsley
Tanner Linsley
96 min
15 Jul, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

React Query is a powerful library for managing server state in React applications. It addresses challenges like caching and synchronization, making it ideal for complex data-fetching scenarios. The workshop covers key features like caching strategies and the use of custom hooks such as usePosts and usePost for efficient data fetching. React Query's useMutation hook simplifies handling mutations, offering functionalities like optimistic updates to enhance performance. The talk also delves into the use of prefetching to reduce loading times and improve user experience. React Query Devtools provide a way to see and manage queries, ensuring data synchronization and efficient debugging. The library supports various data-fetching methods, including GraphQL, making it versatile for different backend technologies. The admin section of the app demonstrates how React Query can handle global state management without needing tools like Redux. The useIsFetching hook is highlighted for checking background data fetching, and the use of query keys and constants for managing large applications is discussed. The video emphasizes the benefits of using React Query for real-time data synchronization and how it can significantly improve user experience by reducing loading screens and providing instant access to cached data.
Available in Español: Repensando el Estado del Servidor con React Query
Video transcription and chapters available for users with access.
Available in other languages: