Book Image

State Management with React Query

By : Daniel Afonso
Book Image

State Management with React Query

By: Daniel Afonso

Overview of this book

State management, a crucial aspect of the React ecosystem, has gained significant attention in recent times. While React offers various libraries and tools to handle state, each with different approaches and perspectives, one thing is clear: state management solutions for handling client state are not optimized for dealing with server state. React Query was created to address this issue of managing your server state, and this guide will equip you with the knowledge and skills needed to effectively use React Query for state management. Starting with a brief history of state management in the React ecosystem, you’ll find out what prompted the split from a global state to client and server state and thus understand the need for React Query. As you progress through the chapters, you'll see how React Query enables you to perform server state tasks such as fetching, caching, updating, and synchronizing your data with the server. But that’s not all; once you’ve mastered React Query, you’ll be able to apply this knowledge to handle server state with server-side rendering frameworks as well. You’ll also work with patterns to test your code by leveraging the testing library and Mock Service Worker. By the end of this book, you'll have gained a new perspective of state and be able to leverage React Query to overcome the obstacles associated with server state.
Table of Contents (14 chapters)
Part 1: Understanding State and Getting to Know React Query
Part 2: Managing Server State with React Query

What do different state management libraries have in common?

One of the freedoms React offers you is that it does not impose any standards or practices for your development. While this is great, it also leads to different practices and implementations.

To make this easier and give developers some structure, state management libraries were created:

  • Redux promotes an approach focused on stores, reducers, and selectors. This leads to needing to learn specific concepts and filling your project with a bunch of boilerplate code that might impact the code’s readability and increase code complexity.
  • Zustand promotes a custom hook approach where each hook holds your state. This is by far the simplest solution and currently my favorite one. It synergizes with React and fully embraces hooks.
  • MobX doesn’t impose an architecture but focuses on a functional reactive approach. This leads to more specific concepts, and the diversity of practices can lead the developer to run into the same struggles of code structure that they might already suffer from with React.

One common thing in all these libraries is that all of them are trying to solve the same type of issues that we tried to solve with React Context: a way to manage our shared state.

The state that is accessible to multiple components inside a React tree is often called global state. Now, global state is often misunderstood, which leads to the addition of unnecessary complexity to your code and often needing to resort to the libraries mentioned in this section.

At the end of the day, each developer and team have their preferences and choices. Considering React gives you the freedom to handle your state however you want, you must consider all the advantages and disadvantages of each solution before making your choice. Migrating from one to another can take a lot of time and completely change the paradigm of how state is handled in your application, so choose wisely and take your time.

While global state is not the reason why React Query was built, it has an impact on its creation. The way global state is often composed led to the need to manage a specific part of it that has many challenges. This specific part is called server state and the way it was historically handled paved the way to motivate Tanner Linsley to create React Query.