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:

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.

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.

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.

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.

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 (useContext Hook).

1. Redux
2. Redux Toolkit
3. Zustand
4. Recoil

Understanding Zustand

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.

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.

In OtherComponent.js We don't need to pass the count state as a props, we can directly get that state using useCountStore Hook.

Now, there are several ways to getting the state in our component below are some example:

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 🥰.