Zustand state management library is recently gaining a lot of popularity compared to Redux toolkit. It also has more downloads and GitHub stars than redux toolkit as you can see below.

Zustand vs Redux Toolkit Usage

Weekly Downloads Zustand vs Redux Toolkit

Many industry projects are nowadays preferrring Zustand for creating applications. So in this article you will learn how to get started with Zustand in a React application.

So let’s get started.

---

Zustand is a simple and fast state management library for React applications. It is easy to use, especially for beginners, and a great alternative to more complex libraries like Redux and Redux Toolkit.

Why Use Zustand?

• Very easy to learn: Minimal API surface and very little setup required.

• Small and fast: Less bundle size and efficient updates.

• Works with hooks: Feels native to modern React development.

• No provider needed: Just one function and you're set!

Why Zustand over Redux?

• Less boilerplate

• Simple and un-opinionated

• Makes hooks the primary means of consuming state

Why Zustand over Context?

• Less boilerplate

• Renders components only on store data used in component changes

• Centralized, action-based state management

Want to learn through video? click the link below for a preview video from my Zustand Course.

For more such FREE previews, check out the course page.

Installing Zustand

To add Zustand to your React project, execute the following command in your terminal:

npm install zustand

Core Concepts

• Store: Central place to keep your state and the functions (actions) to change it.

• State: The data you want to keep track of.

• Actions: Functions that update the state.

• Hooks: Functions you use inside your components to read and update the state.

Basic Example: Counter App

Let's go through a simple example, a counter app:

1. Create the Store

First, make a new file (for example, store/counterStore.js):

import { create } from 'zustand'

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

export default useCounterStore;

This store defines:

• count: the state variable

• increment and decrement: actions (functions) to update the count

Note that, we have given useCounterStore as the name for the store, because every store created with Zustand is a custom which which we can directly access in any of the functional component.

2. Use the Store in a Component

In your React component (e.g., Counter.js):

import React from 'react'
import useCounterStore from './store/counterStore'

function Counter() {
  const count = useCounterStore(state => state.count);
  const increment = useCounterStore(state => state.increment);
  const decrement = useCounterStore(state => state.decrement);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  )
}

export default Counter

That’s it!

This way you can create as many stores as you want, one for storing profile information, another for storing authentication information and so on.

Also, as you can see, to use Zustand store, you don’t need to write a lot of boilerplate code like Redux or Redux Toolkit.

You also don’t need to wrap your entire application with the Provider component from react-redux.

So using Zustand, makes it to really easy to manage state of your entire application.

How Zustand Works

• Direct store usage: Components call the useCounterStore hook directly.

• Automatic updates: Zustand ensures your components re-render only when the part of the state they use changes.

• No boilerplate or provider: Just create the store and use it; no extra setup needed.

When Should You Use Zustand?

• Managing shared or global state (e.g., theme, authentication, shopping cart).

• When useState and useContext become hard to manage.

• In both small and large applications - Zustand scales easily.

Extra Features

• Selectors: Access only parts of the state to avoid unnecessary re-renders.

• Middleware support: Add features like logging or persistence easily.

• Multiple stores: Split state into smaller stores for bigger apps.

• Works with TypeScript: Define types for safety and better developer experience.

Summary Table: Key Concepts

Learn Zustand Basics and Build 2 large applications using React + TypeScript + Zustand + React Hook Form + Zod Validation in this video course. Bonus Offer Available Only For Today.

Build Ecommerce App Using Zustand - Application Demo

Connect With Me

• Check out my other courses

• GitHub