Zustand and React Query New state management duo

We've all used Redux extensively in our React projects , and I guess we have all loved using Redux and it has saved us from the clutches of state management . However with great power , Redux comes up with a lot of complexity . Thus there as been a new competitor in the state management town -- ZUSTAND , another powerful state management library .

For every application , Data Fetching as been one of the very crucial step in any web project and affects performance of our applications to a large extent . In this realm , REACT QUERY takes lead in data fetching and caching, including support for automatic retries, background re-fetching, and has an array of other features to provide .

Before diving deep into the future of state management and data fetching , let 's first explore :

Why This Topic ?

Before moving ahead , What exactly is state management ?

Let's consider a straightforward scenario: A bottle containing 1L of water sits before us. Suddenly, my friend Jason enters the room and confidently asserts that there are only 500 ml of water left in it. Then, shortly after, another friend named Joe strolls in and claims that there are merely 250 ml remaining. At this juncture, it's easy for me to assume that one, if not both, of them is mistaken. After all, without personally observing the bottle, I cannot ascertain whether water has been consumed, spilled, or otherwise altered. Consequently, it becomes imperative to maintain an accurate record of the bottle's status. Given that both Jason and Joe perceived the bottle at different junctures, there exists only one objective truth concerning its current state.

Same concept applies in our web world also , there is only a single and centralized source of information , and not all the components that we are building are aware of it. Now how they should be rendering that information is what state management is all about .

Now the most famous and used state management tool we all know about is Redux , however there is a very new easier and simpler tool ZUSTAND in the town and it is important to know a good alternative too .

Data Fetching has been very crucial and thus managing it effectively , plays a very important role in any web project , thus React Query comes into play .

ZUSTAND

Zustand, brings the charm of simplified state management to the party and takes a minimalistic approach .
Uncomplicated , scalable bearbones state-management solution
It is also built using simple flux principles ( similar to Redux )
Zustand is also an easy to learn , and comes with a single hook without the need for a complex setup .
Above mentioned points are somewhat makes Zustand simple and accessible too .

ZUSTAND VS REDUX

Redux is powerful, but its power comes with complexity. It requires setting up actions, reducers, and stores, which can be overwhelming for beginners. Zustand, on the other hand, comes with easy and handy approach with every React developer 's favourite HOOKS .

Following is a comparison chart between both :

Also here is a simple code comparison between "Creating a store via Redux and via Zustand "

Now moving ahead , Zustand and React Query alone are also very powerful but together they are a beast , so it becomes very important to cover React Query too .

REACT-QUERY

React Query is a powerful and flexible data fetching and caching library for React.
This makes it easy to handle a wide range of data fetching and caching scenarios in your application, without the need for custom logic or boilerplate.
It also works with hooks and we can create custom hooks and can thus extensively use in our application anywhere .
React Query provides with useQuery and useMutation hooks .

Conclusion

Thus concluding both Zustand and React Query can be like Iron man and Captain America of your React Application , and on a high level React Query can manage the server state while Zustand can manage the local state of your application . Also Zustand can't be replacement for Redux but is a good alternative for the same .

For more information and a quick live demo on these libraries , you can have a quick look at a talk I delivered recently at a React meetup organized by React Bangalore .

Here is a link to the talk :

React Query + Zustand Talk

Also here is the github link for live demo : Live demo Github

Furthermore , following are some really good documentations that you can refer :