Simplifying State Management with Zustand: A Redux and Context API Alternative

There has always been a variety of opinions regarding state management within the React ecosystem. When Redux was released, it was considered a revolutionary technology, as it enabled applications to have an immutable global store, and it solved problems such as prop drilling in an elegant manner. As time has passed, it has remained an excellent and scalable solution.

Additionally, ContextAPI which is a way to manage global state conveniently within a React application has been a favorite, particularly for beginners and for those who prefer a simpler approach to state management as it allows for state to be passed down to child components without the need for props.

Redux has been and still is the dominant and traditional state management tool for the React community. However, the boilerplate-rich nature of Redux often irritates developers and most beginners when they want to get started.

ContextAPI, which is also considered an alternative to Redux for small-scale projects, can be a good escape route for most developers but still, it lacks many features such as code splitting and lazy-loading of states and requires somewhat a boilerplate.

This is where the simple and decent solution - Zustand comes to the rescue.

Zustand:

Zustand is a state management library for React applications that aims to provide a simple and lightweight solution. It offers a minimalistic API while still maintaining powerful features for managing states.

As said in the official docs:

A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy API based on hooks, isn't boilerplatey or opinionated.

This is actually a true statement, as Zustand gets us rid of the lengthy traditional boilerplate and introduces a minimal approach.
The store is created using simply a few lines of code:

// store.js

import { create } from 'zustand'

const useGlobalStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  resetCount: () => set({ count: 0 }),
}))

In the same way, components can access the states and hooks without the need for any providers or wrappers:

// App.js

function Counter() {
  const counter = useGlobalStore((state) => state.count)
  return <h1>Count : {count}</h1>
}

function Controls() {
  const increment = useGlobalStore((state) => state.increment)
  const resetCount = useGlobalStore((state) => state.resetCount)

  return (
    <>
        <button onClick={increment}>Increment</button>
        <button onClick={resetCount}>Reset</button>
    </>
)
}

Why Zustand?

• Small, fast, and scalable state management solution based on simplified Flux principles.

• Does not require other dependencies to reduce boilerplate code.

• Handles common pitfalls like the zombie child problem, React concurrency, and context loss between mixed renderers.

• Components can directly use the store hook without the need for providers.

• Offers less boilerplate compared to using Redux and Context directly.

• Optimizes rendering by updating components only when necessary.

This is just the tip of the iceberg. Besides these, there are numerous other features that Zustand offers such as Async functions, Middlewares, Redux dev tools, and many more.