Level Up Your State Handling in React: Why Zustand Helps You Manage State like a Pro over Redux?

Rabah Ali Shah

Listen

Managing states is one of the most challenging part while building an application which every developer have to face. No doubt, by using some React Hooks this problem can be solved, but managing state can be more and more complex in bigger apps. In such cases, we cannot merely rely on very common React hooks like useState and useReducer etc. Since, every library brings a solution for a particular problem. In case of React and for more complex statement management, Dan Abramov introduced a library called Redux.

Redux comes with an amazing concept of centralized store which is available independently throughout your React app. This concept helps a developer not to worry about getting the current state of a component or manipulating it. All you need to do is to wrap store in provider at the top level of your React app and the import functions using some Redux hooks in components where you want to read the current state or manipulate it.

Creating Redux Store:

This is how you create a Redux store which contains initial states, reducer functions or actions which we want to perform on our states to update their current states. For this case, this store actually contains all the logic for a simple counter which add or subtract values by clicking on “Increment” or “Decrement” button respectively.

Once we have created our store now it's time to bind it with our React Component:

On top of our app in index.js file, we are providing Redux store to the app. In simple words, we are declaring our store on the top level of our React App so that its state is available to all of its children elements.

Now going to the file where we want to use our Redux Store:

You will need useSelector hook to get the data from Redux store and then by using useDispatch hook you can call the action to update your state.

This is how you manage states in Redux.

The problem you may have noticed is the long boilerplate of Redux. Even to manage such simple logics, you have to set up all above-mentioned Redux boilerplate. And sometimes this becomes complex to understand what's going on with Redux because to get the data you require an extra useSelector hook and to call your action you require useDispatch hook. Which becomes hectic to use in bigger apps where the state management is way more complex.

The solution to this problem is Zustand. This is a small, fast and scalable React state management solution using simplified flux principles. Zustand comes with the same concept of centralized store which manages your state and available throughout your app.

The best thing about Zustand is that unlike Redux you do not need to set up a long boilerplate and use extra hooks to read, call and manipulate states. All you need is to create a store and simple use it anywhere in your React app. No need to wrap its provider on top level of the app.

Creating Zustand Store:

See how it is simple to create a store in Zustand. Just by using create function. Once you have created your store with Zustand. It's time to bind it with your component where you want to read data from your store.

This is how you're going to call your reducer functions, so-called actions. Simply import your action and call it. That's it! NO NEED of extra hooks to read and dispatch actions. Simply import and use them.

I hope after seeing all above code, simplicity of Zustand and its comparison with Redux you have got your answer but still following are some perks that you're going to get while using Zustand.

Managing states can be challenging in more complex and bigger applications. No doubt, Redux, and hooks like useContext, useReducer are here to help us. But the problem is, the long and complex boilerplate setup which makes Redux less user-friendly while managing states.

Here comes Zustand a small, fast and scalable state management solution for React apps. Its simplicity, less boilerplate setup and user-friendly state management behaviors makes it more favorable than Redux. Feel free to use Zustand in your production and enjoy its beauty of managing states in a clean and simple way.

No doubt, Redux is very popular and have been used more than Zustand in production. But still if you are looking for a solution to manage states same as Redux but with the less boilerplate setup and more simple state management solution than Zustand would be the best choice. This is the reason Zustand is getting popular among developers, and they are in love with using it. Must have a try.

Thank you so much for reading this far. I hope you find this article informative and helpful. If yes, then share it with your friends. If you want to keep yourself up to date with hot technologies and industries latest trends, then follow me on X/Twitter and connect with me on LinkedIn. I post a lot of informative and learning content related to programming and latest technologies.