Zustand : A lightweight approach for state-management

State management is very necessary while developing a scalable application with lots of data flows. React has its own local state system. Its the useState hook. It lets us add the application's local state to functional components. But as the application grows bigger, the complexity of managing states accross the app's components becomes very difficult. In this case, there are several solutions like Redux, MobX, Zustand etc. Even though their behavior, weight, implementation is different, they serve the same purpose of managing states globally in a React application. Lets explore the world of Zustand.

What is Zustand

In the world of Reacts state management library, Zustand is a lightweight, fast and scalable global state-management solution using simplified flux principles. It leverages React hooks to provide easy access and updates to the global store.

Why Zustand ? ( Over the other solutions )

Before going to the implementations lets have a look at the reason of its usage over other solutions. There are multiple solutions for React application to solve the global state-management issue. There are widely used solutions like Context, Redux, MobX etc. But why should we use Zustand? Lets have a look at a comparison between the other major solutions.

• Zustand eliminates the need for props drilling or other methods of passing state between components, unlike Redux.
• Zustand outperform Redux and Context in terms of performance. Its due to its similicity and lightweight nature. However Redux performance can be optimized with the help of tools like Redux Toolkit.
• Zustand is unpoinionated and has a minimal API surface and is relatively easy to understand. Meanwhile Redux's complexity can be attributed to its adherence to strict principle and guidelines.
• Zustand has less boilerplate than other solutions and doesnt wrap the app in context providers.
• Most importantly, Zustand can perform inform components transiently which means without causing render. It only renders component only on changes.

Usage

Installation

First we need to install this library to our project with Yarn or NPM whichever is conventient to the project.
npm install zustand # or yarn add zustand

Creating our first store

In Zustand, your Store is a hook. We can put anything in it. We can keep values like number, string, booleans, objects, functions etc. The states have to be updated immutably and set function mereges state to update.

Lets create our Store. For example, lets say we want a global state where we control the state of a Volume feature. The state determines if Volume is muted or not application-wide.

import { create } from 'zustand'
const useVolumeStore = create((set) => ({
  isMuted: false,
  setIsMuted: (val: boolean) => set(() => ({isMuted: val})),
}))

Using the hook

We can use the useVolumeStore anywhere, no providers are needed. We can select our state and the component will re-render on changes.

import {usePlayStore} from '../../store/VolumeStore';
.
.
.
const isMuted = useVolumeStore((state) => state.isMuted);
const setIsMuted = useVolumeStore((state) => state.setIsMuted);

Like this, we can always access the states and their modifiers anywhere in the project. There are also plenty of stuffs that can be modified for example persistence and etc. in Zustand.

Conclusion

In conclusion, Zustand offers simplicity, lightweight implementation, performance benefits, making it suitable for average sized projects or developers who prefer a more lightweight solution. While choosing any of the solutions considering the specific needs of the project, teams familiarity with each library. Both Zustand and Redux and other widely used libraries have their strengths and can be effective solutions for managing states in React applications.