Zustand 101: A Beginner's Guide to Global State Management in React
Tags: react, javascript, beginners, webdev
Published: 2022-12-16 18:16:30

If you're a React developer, you've probably heard of [Redux](https://redux.js.org/), a popular JavaScript library for managing application state. 

However, if you're looking for a simpler and more lightweight alternative, you might want to consider [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction).


![zustand bear](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogvgbqlwdsvnc6u8iq7a.png)


If you don't know already, global state management is the process of centralizing the shared state of a web application.

This helps to ensure that different parts of the application can communicate and share data with one another, and can reduce the risk of inconsistencies or bugs like [prop drilling.](https://www.geeksforgeeks.org/what-is-prop-drilling-and-how-to-avoid-it/)

![state diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvvdoom5oyeypufvsus2.png)

Zustand is a state management library for React that is easy to use, lightweight, fast, and most importantly: it is super simple to learn! Zustand allows you to manage your application's state in a simple and intuitive way, without the need for complex reducers and action creators like Redux.


##Creating a Store


The first step in using Zustand is to create a store. A store is an object that holds your application's state and provides methods for updating that state.

To create a store, you'll need to import create from Zustand. The create function takes a function that returns your initial state as an argument:

```js
import create from 'zustand';

const useCountStore = create((set) => ({
  count: 0,
}))
```
In this example, we've created a store with an initial state of { count: 0 }. Because the purpose of Zustand is to provide <i>global state</i>, the value of count can later be accessed in any component.


##Updating State


Once you've created your store, you can update the state using the set method provided by the store. The set method takes a function that receives the current state as an argument and returns the new state:

```js
store.set(state => ({ count: state.count + 1 }));
```

It's good practice to scope these functions in your store so that they can be accessed globally. It's kind of overkill for our simple use but it's good practice.
```js
const useCountStore = create((set) => ({
  count: 0,
  increaseCount: () => set((state) => ({ count: state.count + 1 })),
  resetCount: () => set({ count: 0 }),
}))
```

##Consuming State


To access the state from your React components, you'll need to use the ``useStore`` hook provided by Zustand. The ``useStore`` hook takes a function that receives the current state as an argument and returns the state values that you want to access. Here's an example of how we can display count to the screen:

```js
import { useStore } from 'zustand';

function MyComponent() {
  const count = useStore(state => state.count);

  return <div>{count}</div>;
}
```
In this example, we've used the ``useStore`` hook to access the count value from the store and render it in a div element. Simple!


##Modifying State


Modifying the state is very similar to accessing it. You will again use the ``useStore`` hook, but this time we can assign the function we want to access to a variable to use in our React component.

```js
import { useStore } from 'zustand';

function MyComponent() {
  const count = useStore(state => state.count);
  const increaseCount = useStore(state => state.increaseCount)

  return (
    <div>
      {count}
      <button onClick={increaseCount}>Click me to increase the count!</button>
    </div>
  );
}
```

Now, if you click the button, count will be increased by 1. Because the state is global, all React components accessing ``count`` will display the count + 1 when mounted.


##Wrapping Up


That's all you need to know to get started with Zustand in your React application! As you can see, it's a simple and intuitive way to manage your application's state without the complexity of Redux. 

Give it a try and see how it can make your state management easier, more efficient, and easier to maintain. Thanks for reading and HAPPY CODING!!!