Zustand: A Lightweight State Management Library for React

Zustand is a small, fast, and flexible state management library designed to manage state in React applications. While libraries like Redux or MobX offer powerful solutions for managing complex global states, they often come with a significant learning curve and boilerplate. Zustand provides a simpler alternative, with a minimal API that lets you manage global or local state with ease.

With Zustand, you can manage your application's state without the need for reducers, middleware, or actions. Zustand stores are powerful enough to handle large-scale applications, yet simple enough to implement in smaller projects without unnecessary overhead.

Simplicity: Zustand has a minimalistic API that's easy to learn and use, making it perfect for small to medium-sized projects.
Performance: Unlike React's Context API, Zustand doesn’t suffer from unnecessary re-renders. It only re-renders components that consume the specific state slice that has changed.
Scalability: It’s lightweight yet powerful enough to handle more complex state management needs, such as asynchronous actions and middleware.
Flexibility: Zustand is framework-agnostic and can be used in any JavaScript project, not just React.

Let’s dive into some practical examples. In this section, we’ll show how to install Zustand and build a simple counter application.

1. Installation

First, install Zustand via npm or yarn:

$ npm install zustand

Or, if you prefer yarn:

$ yarn add zustand

Once installed, you can start building your store.

2. Creating a Zustand Store

Creating a store in Zustand is simple. You use the create function provided by Zustand to define your state and any actions to manipulate that state.

Example: A Simple Counter Store

import create from 'zustand';

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

In this example, we create a store that contains a count state, and two actions, increase and decrease, to modify that state. The set function provided by Zustand allows us to update the store.

Explanation:

count: The initial state, set to 0.
increase: A function that increases the count by 1.
decrease: A function that decreases the count by 1.

3. Consuming the Store in Components

Now that we have our store, let’s see how to use it in a component. Zustand makes consuming state in components extremely simple with its hook-based approach.

Example: A Simple Counter Component

import React from 'react';
import { useStore } from './store';

const Counter = () => {
    const { count, increase, decrease } = useStore((state) => ({
        count: state.count,
        increase: state.increase,
        decrease: state.decrease,
    }));

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={increase}>Increase</button>
            <button onClick={decrease}>Decrease</button>
        </div>
    );
};

export default Counter;

Explanation:

We use the useStore hook to extract the count, increase, and decrease values from our Zustand store.
Zustand ensures that only the components that use specific slices of the state will re-render when that state changes. This results in fewer unnecessary re-renders compared to using React's Context API.
The increase and decrease functions are called when the buttons are clicked, updating the state and causing the component to re-render with the new count.

4. Managing Complex State

Zustand isn’t just for simple state. You can also manage more complex state, including arrays, objects, and even asynchronous actions.

Example: Managing an Array of Todos

Let’s extend the example to manage a list of todo items.

import create from 'zustand';

const useTodoStore = create((set) => ({
    todos: [],
    addTodo: (newTodo) => set((state) => ({ todos: [...state.todos, newTodo] })),
    removeTodo: (todoId) => set((state) => ({
        todos: state.todos.filter((todo) => todo.id !== todoId)
    })),
}));

Explanation:

todos: An array that stores all todo items.
addTodo: A function that adds a new todo to the array.
removeTodo: A function that removes a todo from the array based on its ID.

Consuming the Todo Store in Components

import React, { useState } from 'react';
import { useTodoStore } from './todoStore';

const TodoApp = () => {
    const [newTodo, setNewTodo] = useState('');
    const { todos, addTodo, removeTodo } = useTodoStore();

    const handleAddTodo = () => {
        if (newTodo) {
            addTodo({ id: Date.now(), text: newTodo });
            setNewTodo('');
        }
    };

    return (
        <div>
            <h1>Todo List</h1>
            <input
                type="text"
                value={newTodo}
                onChange={(e) => setNewTodo(e.target.value)}
                placeholder="Enter a new todo"
            />
            <button onClick={handleAddTodo}>Add Todo</button>
            <ul>
                {todos.map((todo) => (
                    <li key={todo.id}>
                        {todo.text}
                        <button onClick={() => removeTodo(todo.id)}>Remove</button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default TodoApp;

In this example, the TodoApp component consumes the useTodoStore hook to manage a list of todos. Zustand efficiently handles adding and removing todos while ensuring that only the necessary parts of the UI re-render when state changes.

5. Async Actions with Zustand

Zustand supports async actions as well. Let’s look at how to fetch data using an asynchronous action within a Zustand store.

Example: Async Action for Fetching Data

import create from 'zustand';

const useDataStore = create((set) => ({
    data: [],
    loading: false,
    fetchData: async () => {
        set({ loading: true });
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        set({ data: result, loading: false });
    },
}));

Explanation:

loading: A boolean flag to indicate whether the data is being fetched.
fetchData: An asynchronous function that fetches data from an API and updates the state.

Consuming Async State in a Component

import React, { useEffect } from 'react';
import { useDataStore } from './dataStore';

const DataComponent = () => {
    const { data, loading, fetchData } = useDataStore();

    useEffect(() => {
        fetchData();
    }, [fetchData]);

    if (loading) return <div>Loading...</div>;

    return (
        <ul>
            {data.map((item) => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );
};

export default DataComponent;

Zustand is a lightweight but powerful state management tool that simplifies state management without compromising flexibility. Its minimal API and optimized performance make it a great choice for developers looking to build fast, scalable React applications with a clean state management architecture.

If you’ve been overwhelmed by more complex state management libraries like Redux, give Zustand a try. Its simplicity and performance can transform the way you manage state in your React projects, helping you stay productive and focused on building great features.

Simplicity: Zustand has a minimalistic API that's easy to learn and use, making it perfect for small to medium-sized projects.
Performance: Unlike React's Context API, Zustand doesn’t suffer from unnecessary re-renders. It only re-renders components that consume the specific state slice that has changed.
Scalability: It’s lightweight yet powerful enough to handle more complex state management needs, such as asynchronous actions and middleware.
Flexibility: Zustand is framework-agnostic and can be used in any JavaScript project, not just React.

Let’s dive into some practical examples. In this section, we’ll show how to install Zustand and build a simple counter application.

1. Installation

First, install Zustand via npm or yarn:

$ npm install zustand

Or, if you prefer yarn:

$ yarn add zustand

Once installed, you can start building your store.

2. Creating a Zustand Store

Creating a store in Zustand is simple. You use the create function provided by Zustand to define your state and any actions to manipulate that state.

Example: A Simple Counter Store

import create from 'zustand';

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

Explanation:

count: The initial state, set to 0.
increase: A function that increases the count by 1.
decrease: A function that decreases the count by 1.

3. Consuming the Store in Components

Now that we have our store, let’s see how to use it in a component. Zustand makes consuming state in components extremely simple with its hook-based approach.

Example: A Simple Counter Component

import React from 'react';
import { useStore } from './store';

const Counter = () => {
    const { count, increase, decrease } = useStore((state) => ({
        count: state.count,
        increase: state.increase,
        decrease: state.decrease,
    }));

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={increase}>Increase</button>
            <button onClick={decrease}>Decrease</button>
        </div>
    );
};

export default Counter;

Explanation:

We use the useStore hook to extract the count, increase, and decrease values from our Zustand store.
Zustand ensures that only the components that use specific slices of the state will re-render when that state changes. This results in fewer unnecessary re-renders compared to using React's Context API.
The increase and decrease functions are called when the buttons are clicked, updating the state and causing the component to re-render with the new count.

4. Managing Complex State

Zustand isn’t just for simple state. You can also manage more complex state, including arrays, objects, and even asynchronous actions.

Example: Managing an Array of Todos

Let’s extend the example to manage a list of todo items.

import create from 'zustand';

const useTodoStore = create((set) => ({
    todos: [],
    addTodo: (newTodo) => set((state) => ({ todos: [...state.todos, newTodo] })),
    removeTodo: (todoId) => set((state) => ({
        todos: state.todos.filter((todo) => todo.id !== todoId)
    })),
}));

Explanation:

todos: An array that stores all todo items.
addTodo: A function that adds a new todo to the array.
removeTodo: A function that removes a todo from the array based on its ID.

Consuming the Todo Store in Components

import React, { useState } from 'react';
import { useTodoStore } from './todoStore';

const TodoApp = () => {
    const [newTodo, setNewTodo] = useState('');
    const { todos, addTodo, removeTodo } = useTodoStore();

    const handleAddTodo = () => {
        if (newTodo) {
            addTodo({ id: Date.now(), text: newTodo });
            setNewTodo('');
        }
    };

    return (
        <div>
            <h1>Todo List</h1>
            <input
                type="text"
                value={newTodo}
                onChange={(e) => setNewTodo(e.target.value)}
                placeholder="Enter a new todo"
            />
            <button onClick={handleAddTodo}>Add Todo</button>
            <ul>
                {todos.map((todo) => (
                    <li key={todo.id}>
                        {todo.text}
                        <button onClick={() => removeTodo(todo.id)}>Remove</button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default TodoApp;

5. Async Actions with Zustand

Zustand supports async actions as well. Let’s look at how to fetch data using an asynchronous action within a Zustand store.

Example: Async Action for Fetching Data

import create from 'zustand';

const useDataStore = create((set) => ({
    data: [],
    loading: false,
    fetchData: async () => {
        set({ loading: true });
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        set({ data: result, loading: false });
    },
}));

Explanation:

loading: A boolean flag to indicate whether the data is being fetched.
fetchData: An asynchronous function that fetches data from an API and updates the state.

Consuming Async State in a Component

import React, { useEffect } from 'react';
import { useDataStore } from './dataStore';

const DataComponent = () => {
    const { data, loading, fetchData } = useDataStore();

    useEffect(() => {
        fetchData();
    }, [fetchData]);

    if (loading) return <div>Loading...</div>;

    return (
        <ul>
            {data.map((item) => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );
};

export default DataComponent;

How does Zustand differ from Redux for state management?

Can I use Zustand alongside other state management libraries like Redux or React Context?

Does Zustand support server-side rendering (SSR) in React applications?

Table of contents

Share This Blog !

Get the best of our content straight to your inbox!

Zustand: A Lightweight State Management Library for React

Introduction to Zustand

Why Choose Zustand?

Getting Started with Zustand

1. Installation

2. Creating a Zustand Store

Example: A Simple Counter Store

Explanation:

3. Consuming the Store in Components

Example: A Simple Counter Component

Explanation:

4. Managing Complex State

Example: Managing an Array of Todos

Explanation:

Consuming the Todo Store in Components

5. Async Actions with Zustand

Example: Async Action for Fetching Data

Explanation:

Consuming Async State in a Component

Conclusion: The Power of Simplicity

Trendingblogs

The Software Development Life Cycle (SDLC): A Complete Guide for Software Success