Zustand - The State Management Library for React & Next JS
Tags: javascript, webdev, react, nextjs
Published: 2024-01-13 11:09:32

##Overview

State Management is a crucial aspect of building robust and scalable **React** & **NextJS** application. As the Project grow in complexity then handling the state effectively becomes more challenging for developers. That's why the Developer has find one solution for managing all the state globally. There are some library such as **Redux** and **Redux Toolkit** but it is more complicated for beginner to understanding the concept of Redux and they really don't know how it’s actually going to work under the hood. 

In this blog, we'll explore **_Zustand_**, a lightweight and efficient state management tool designed for React and NextJS.



##What is State in React?

In React, the state is treated as a variable for example in JavaScript for storing and updating the data we need variables like `let`, `var` and `const`, it exactly same for React but we called it State. But in deep-down the State refers to an object that represent the data values. 

#####Why we not used `var`, `let` and `const` in React for managing and updating the data?
Because React has a concept of VDOM (Virtual Document Object Model) and whenever the variable like `var`, `let` and `const` is updated, still React is not responsible for re-render the application and this is default behaviour of React. Re-rendering only happens when the State value is updated or changed. That’s why we used State instead of this JavaScript variables.

##How to Initialize State in React

We can initialize state in a component using the `useState` hook in functional components or by using the state property in class components. Here's a basic example using functional components and the useState hook:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wwwjnwg02pqyysq2qgb.png)
Here, In the above example the `count` variable is part of the component's state, and it can be updated using the `setCount` function. 
Remember one thing that _state_ should be treated as _immutable_  in React, meaning you should not modify it directly. Instead, always use the provided functions (like `setCount` in the below example) to update the state.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mur5t9vki4b77a25yf23.png)


##What is State Management?
In React, every component has it's own local state and sometime we need to pass that data into another component, If two component has relation of parent-child then we can easily pass that `state` data using `props`, but if there is no relation between that two component then there is no direct way to pass that data. Below image show the example of data passing using `props`.

Here, I have created one more component that name is `OtherComponent.js` which simply display the count.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3a5g7o20ao62oy4s538m.png)

And we import the `OtherComponent.js` in `App.js` and passing the `count` data value using `props`, So now, `OtherComponent.js` will also get access of `count` state. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6k3w6gs5l1fp65w29tg3.png)

Suppose, If `OtherComponent.js` is not a child component of `App.js` and it will used in somewhere in the application, then how can we pass that data into that component? 
For that, React comes with the **Global State Management Solution**. In this case, some state has been created in global level, so any component can easily get the have access to that state, and whenever the state is changed or update, it will directly re-render that page where state is used. Below image show How the State is actually manage in global level.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99ms6sdga094nroshtjx.png)


##Other Options for Managing State

In React there are so many option to manage the State in Global Level. If the application is smaller then React has their own feature to provide the state management and that is a [Context API](https://react.dev/reference/react/useContext) (useContext Hook).

1. [Redux](https://redux.js.org/) 
2. [Redux Toolkit](https://redux-toolkit.js.org/)
3. [Zustand](https://zustand-demo.pmnd.rs/)
4. [Recoil](https://recoiljs.org/)

##Understanding Zustand 
**[Zustand](https://github.com/pmndrs/zustand)** is a small, fast, and scalable state management library that leverages hooks for managing global state. It is very easy to use and not that much complicated, so beginner also comfortable while using **Zustand**. 

**Let's try to implement Zustand with me 😎: **

First install zustand in our project.
>>> `npm install zustand`

then we need to create one file `countStore.js` where our state and their method will be initialize.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbqqmy4smk7szcbw7l7m.png)

**Zustand** provide the `create` function for creating the store and that store can be used as a **custom hook**. 

In this example, the `useCountStore hook` is used to create a global state with a `count` variable and corresponding `increment` and `decrement` actions.

Now, this _count_ state and their _actions_ can be used in any component throughout the whole application.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulg13c2k6v4h2vt2v9ex.png)

In `OtherComponent.js` We don't need to pass the count state as a props, we can directly get that state using **useCountStore Hook**. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/joajbt76varvvhcc2ngo.png)

Now, there are several ways to getting the state in our component below are some example:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5ewyh38wfxtc619xc0w.png)

But I will suggest to used the second one and the last one, Because in the first one, we are using destructure approach for importing all the state and their method, so even if they are not used in their respective component, but updated in any other component still React re-render the components where they are imported and initialized and that will cause affect the performance of the application.

There are lots thing that can be used in advanced level, but we are end our blog here. I hope you will loved it 🥰.