If you're looking for a lightweight state management solution for your React application, Zustand is worth exploring. Zustand is a state management library that provides a simple and efficient way to manage the state in your React components. In this blog, we'll cover the fundamentals of Zustand so you can get started with this powerful library.

What is Zustand?

Zustand is a state management library for React that provides a small, but powerful API to manage the state in your components. It is inspired by the Flux architecture and uses a store to manage the state, with actions to update the state and subscribe the store to listen to the changes.

One of the main advantages of Zustand is its performance. Zustand is designed to be lightweight and fast which means that it won't slow down your application. You can define your own custom hooks that uses the Zustand store to manage the state of your application. This allows you to create reusable state management logic that can be used across your application.

Zustand is lightweight and has a small bundle size, making it a great choice for small to medium sized applications. Zustand is also very easy to learn and use, even if you are new to state management libraries.

Installing Zustand

To install Zustand, you can use either NPM or Yarn. Here's how to install it with NPM:

npm install zustand

And here's how to install it with Yarn:

yarn add zustand

Creating a store

The first step in using Zustand is to create a store. A store is an object that contains the state and actions for the state management feature in your application.

Here is an example of how to create a store:

import create from 'zustand';

const useStore = create((set) => ({
  intialCount: 0,
  increment: () => set((state) => ({ intialCount: state.count + 1 })),
  decrement: () => set((state) => ({ intialCount: state.count - 1 })),
}));

In the above example, we have created a store that manages intialCount state variable with two actions to increment and decrement the count variable. The create function takes a function that returns an object containing the state and actions.

Using a store

After we have created a store we can now use it in our components. To access the state and actions from the store we will be using one hook named useStore.

Here is an example of how to use the useStore hook:

import React from 'react';
import useStore from './useStore';

const CounterApp = () => {
  const { initialCount, increment, decrement } = useStore();
  return (
    <>
      <h3>Count : {initialCount}</h3>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </>
  );
}
export default CounterApp;

In this example, we are using the useStore hook to access the initialCountstate variable and the increment and decrement actions. We can then use these in our components to display the count and update it when buttons are clicked.

Subscribing to the Changes

we can use the useEffect hook to subscribe to changes and update your component when the state changes.

Here is an example of how to subscribe to changes:

import React from 'react';
import useStore from './useStore';

const CounterApp = () => {
  const { initialCount, increment, decrement } = useStore();

  useEffect(() => {
    console.log(`Latest Count : ${count}`);
  }, [count]);

  return (
    <>
      <h3>Count : {initialCount}</h3>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </>
  );
}
export default CounterApp;