How to use Zustand

Author: Chidume Nnamdi

Introduction

Redux changed the game in the global management system. It was so successful that it was widely adopted and used as the ideal state management system in any framework. Not only in the framework but its principle still serves greatly in software development. Almost all developers have used Redux to manage their global state, and we can all attest to how powerful, fast, and maintainable it is to use Redux as the global state management tool. It makes debugging very easy and our app is predictable.

Yes, Redux took the grand stage in global state management, but there is a new kid on the block. This new kid is poised, and ready to capture the audience of the global state management system. It comes packing a powerful punch and is armed to the teeth. Its name is Zustand.
With the arrival of Zustand and the goodies it brings, will it suffice to say that Redux reign is coming to an end?

In this article, we will deep dive into Zustand. We will learn about this kid, to understand how it works, its state management technique, and how it will take the state management world by storm.

Steps we'll cover:

• What is Zustand?
• Getting started with Zustand
• Build a To-do app using Zustand

What is Zustand?

A small, fast, and scalable barebones state-management solution using simplified flux principles. Has a comfy API based on hooks, and isn't boilerplates or opinionated. https://github.com/pmndrs/zustand

Zustand is a small unopinionated state management library built by Jotai and React-spring. It has a comfy API based on hooks, and isn't opinionated. Zustand is open-source with a large community of users and support developers working round the clock to make Zustand stable. It sits on Github with 30,000+ stars.

Zustand is very different from Redux in terms of how it is used. Zustand is simple and un-opinionated, it does not wrap your app in content providers like how we do with React-Redux. It mainly uses hooks as a means of communicating back and forth with the state.
At its core, Zustand embraces the concept of a single source of truth, where the entire application state is stored in a centralized store. This store is composed of state slices, which are individual units of state that represent different parts of the application. Each state slice is defined as a separate store, allowing for modularity and encapsulation of related state properties and their associated actions.
Working with Zustand, you will need less boilerplate for it and its state management is centralized and action-based.

Zustand promotes immutability by default, ensuring that state updates are handled in an immutable fashion. When updating the state, you create a new state object rather than modifying the existing state directly. This approach simplifies state management, prevents common mutation-related bugs, and enables efficient change detection and re-rendering in React components.

Another notable feature of Zustand is its built-in support for subscriptions and selective reactivity. Components can subscribe to specific state slices and be automatically re-rendered when those slices change. Zustand uses a fine-grained dependency tracking mechanism based on proxies, allowing for highly efficient updates and minimizing unnecessary re-renders.

In the next section, we will learn how to install and use Zustand in our project.

Open-source enterprise application platform for serious web developers

refine.new enables you to create React-based, headless UI enterprise applications within your browser that you can preview, tweak and download instantly.

🚀 By visually combining options for your preferred ✨ React platform, ✨ UI framework, ✨ backend connector, and ✨ auth provider; you can create tailor-made architectures for your project in seconds. It feels like having access to thousands of project templates at your fingertips, allowing you to choose the one that best suits your needs!

Getting started with Zustand

We know that Zustand is a JavaScript library that runs on Nodejs. So we will need some basic tools to be installed on your machine before we start.

• Nodejs: We need the Nodejs binaries installed in our system. Go over to https://nodejs.org/en/download and install the binaries meant for your machine.
• npm or yarn: These are Node Package Managers, they help in maintaining and managing the dependencies, and the Nodejs environment of our project. npm comes bundled with the Nodejs binaries, so once you install Nodejs you don't need a separate installation for npm. Yarn can be installed by running npm i yarn -g.

Let's create a Nodejs project:

mkdir zustand-prj
cd zustand-prj
npm init --y

• mkdir zustand-prj: This command creates a new directory named "zustand-prj" in the current location. It is equivalent to "make directory." The "zu
• cd zustand-prj: This command changes the current working directory to "zustand-prj." By running this command, you will navigate into the newly created directory.
• npm init --y: This command initializes a new Node.js project within the "zustand-prj" directory. The npm init command is used to generate a package.json file, which is a manifest file that describes your project's metadata and dependencies. The --y flag is added to automatically accept all default options without prompting for user input. It is a shortcut for answering "yes" to all the initialization questions.

To install the zustand library, we run the below command:

npm install zustand # or yarn add zustand

This command installs the zustand library in our project.

To use zustand, we have to import a create function:

import { create } from "zustand";

This function is called with a callback function and it returns a custom hook. The callback function passed to it is where we will define our state and the functions we can use to manipulate the state. The state and the functions are all in an object returned by this callback function.

Let's see an example:

 const useCounter = create((set) => {
    return {
        counter: 0,
        incrCounter: () => set((state) => ({ counter: state.counter + 1 })),
    };
});

See that the create function, passes a set function to the callback function. This set function is a function used to manipulate the state in the store. States in zustand can be primitives, objects, or functions. In our above example, we have two states in our store: counter, and incrCounter. The useCounter is a custom hook, we can use this hook in our components and we will be able to get the latest state in them. If we use the hook in components A, B, and C. Any change done to the state in B will be reflected in both A and C, and they will all re-render to reflect the new changes.

The custom hook returned by the create acts similarly to useAppSelector in React-Redux, it lets you select a slice of state from the store. You call the hook and pass it a callback function. This function is called by the hook internally and passes the current state to it. So we will then get this state and return the part of the state we want.

Let's see an example.

const counter = useCounter((state) => state.counter);

See that we called the useCounter hook and passed a callback function to it. Then, we expect a state from the hook and then return the counter part of the state.

We can then, display the counter:

const DisplayCounter = () => {
    const counter = useCounter((state) => state.counter);
    return <div>Counter: {counter}</div>;
};

Now, we want to create a component where we can increase the value of the counter state.

const CounterControl = () => {
    const incrCounter = useCounter((state) => state.incrCounter);

    return (
        <div>
            <button onClick={incrCounter}>Incr. Counter</button>
        </div>
    );
};

This is a separate component from where we increase the value of the counter state. See that we sliced out the incrState function from the state, and we set it to the onClick event of the button. This will increase the counter state when the button is clicked.
See how the components are independent of each yet they can "see" the current state from the store. Whenever we click the Incr. Counter button in the CounterControl component, the DisplayComponent will re-render to display the newest counter state value.

Let's see how we use them:

const App = () => {
    return (
        <>
            <DisplayCounter />
            <CounterControl />
        </>
    );
};

They are independent of each other yet magically connected by zustand. This gives React-Redux a run for its money because trying to re-create this small state in Redux-React will take more code to set up:

• First, we will create a store.
• We will wrap either the App component or its children in a Content Provider and pass the store to the Context Provider via a store props.
• We will import useSelector, useDispatch in any component we wish to use in the store.
• To get a slice of the state we will call the useSelector with a callback function.
• To dispatch an action to the store, we will use the useDispatch hook.

It's quite lengthy, but with Zustand it's oversimplified.

Returning the whole state
Now, when we call the custom hook returned by the create function without a callback function, the hook will return the whole state of the store.

const state = useCounter();

See that we called the useCounter hook with no callback function, so in this case, the function will return the whole state in the store.

The state holds the whole state in the useCounter store. We can get the counter state by doing this:

state.counter;
// 0

We can also, call the incrCounter state function:

state.counter;
// 0

state.incrCounter();
// 1

Memoization
We can memoize our zustand store. Memoization is an optimization technique used to optimize the execution of functions by caching the results of expensive or time-consuming function calls. It involves storing the return value of a function associated with a specific set of input parameters so that if the function is called again with the same parameters, the cached result can be returned instead of re-evaluating the function.
The goal of memoization is to improve performance and efficiency by avoiding redundant computations.

Now, zustand gives us the ability to add memoization to the custom hook it returns to us. It exports a shallow function that we can use to add memoization to our state picks.

import { shallow } from "zustand/shallow";

Still using our useCounter as an example, let's say we want to get the counter state from the store. We do this:

// DisplayComponent
const counter = useCounter((state) => state.counter);

Now, let's say the initial state of the counter is 0, when the counter state is updated using the incrCounter, the DisplayComponent will be re-rendered. Now, if the updated value of the counter is 0 we will see that it is unnecessary to re-render the DisplayCounter component.

How do we stop this unnecessary re-rendering from occurring when the previous state and the next state are equal? Zustand directs us to pass a comparator function as a second parameter to the custom hook. This comparator function will compare the previous slice state and the next slice state, if both are the same the component will not re-render, else the component will re-render.

This is exactly what other React hooks do: useEffect, useMemo, and useCallback.
The shallow function is a comparator function provided to us by Zustand. It shallowly compares the two-state slices using the == shallow equality operator.

const counter = useCounter((state) => state.counter, shallow);

See we passed the shallow function as a second parameter to the useCounter hook. On each state change in the store, the shallow will determine if the component will re-render based on the previous and next value of the counter state.
We can use our custom-made comparator if we don't trust the shallow function to do the job. The comparator function takes two parameters, the first parameter is the previous value of the state slice while the second parameter is the next value of the state slice.

(previousState, nextStateSlice) =>

Inside this function is where we do our comparing and return the result. Returning true will make the hook skip the component from re-rendering while returning false will make the component re-render.

Let's create our comparator function for the counter state slice.

(previousCounter, nextCounter) => previousCounter === nextCounter;

This uses the === equality operator to check if the two are the same. It returns a Boolean.

Let's plug it back into the useCounter hook:

const counter = useCounter(
    (state) => state.counter,
    (previousCounter, nextCounter) => previousCounter === nextCounter
);

Now, we have memoized our useCounter hook. With this, we have made our application a bit faster, with no more unnecessary re-renders.

Updating the whole state
We have only talked about getting the state from the store, but we have not delved into how to set the state. We only saw it briefly when we created the useCounter hook earlier on. Now, we will see how to update the state.

We learned that zustand passes a function to the callback function passed to the create function. This function widely accepted to be referred to as set is used to update all or parts of the state.

Let's look into the incrCounter state function:

const useCounter = create((set) => {
    return {
        counter: 0,
        incrCounter: () => set((state) => ({ counter: state.counter + 1 })),
    };
});

Here, we are passing a callback function to the set function. The set function will call this function and pass it the state as an argument, then use the result of the function to update the state. See that in the callback function, we are returning an object with a counter property. The set function uses the properties found in the object to know the properties in the state to update.

We see that when we pass a function to the set function as an argument, the set function expects that we return an object.

We can pass an object to the set function:

set({
    counter: 9,
});

This will update the counter state value to 9.

Clear the entire state
We can clear the state in a zustand store by passing an empty object to the set function.

set({}, true);

This will clear the state and the actions.

What are actions?
Actions are functions that are part of the state in a zustand store. They are like dispatch actions in React-Redux, they are used to effect changes in the store. For example, our incrCounter is an action, we call the set function inside it to update the counter state.

Using async actions
Actions in zustand also support asynchronicity. In fact, according to Zustand docs, zustand does not care if your action is asynchronous or not.
We can perform an asynchronous function in an action. For example, we can make an HTTP request to an endpoint from our action and update the state with the result from the HTTP call.

Let's show an example:

const useCounter = create((set) => {
    return {
        counter: 0,
        incrCounter: async () => {
            const { data } = await axios.get("/counter");
            set({
                counter: data.counter,
            });
        },
    };
});

See that in the incrCounter we made it an asynchronous function by using the async keyword. Inside the function, we made a call to an /counter endpoint and use the set function to update the value of the counter in the state.

Build a To-do app using Zustand

Now, we have learned the basics of zustand and its API. We will create a To-do app using Zustand.

The To-do app will be a React app, while the Zustand will power our state management.

Let's start, we will scaffold a React project using the create-react-app tool:

create-react-app todo-app
cd todo-app

Next, we install zustand:

npm install zustand

The first thing we create our hook store:

import create from "zustand";

const useStore = create((set) => ({
    todos: [],
    addTodo: (text) =>
        set((state) => ({
            todos: [
                ...state.todos,
                {
                    id: Date.now(),
                    text,
                    completed: false,
                },
            ],
        })),
    toggleTodo: (id) =>
        set((state) => ({
            todos: state.todos.map((todo) =>
                todo.id === id ? { ...todo, completed: !todo.completed } : todo
            ),
        })),
    deleteTodo: (id) =>
        set((state) => ({
            todos: state.todos.filter((todo) => todo.id !== id),
        })),
}));

export default useStore;

See, we have a todos state. This will hold an array of our todos. We have three actions: addTodo, toggleTodo, and deleteTodo. The addTodo action adds new todo to the todos state. , the toggleTodo action toggles the completed state of a todo. The deleteTodo removes a todo from the array state.
Now, let's build the components.

DisplayTodos
This component will have one job. It will render the todos state:

const DisplayTodos = () => {
    const { todos, deleteTodo } = useStore((state) => {
        return { todos: state.todos, deleteTodo: state.deleteTodo };
    });

    return (
        <ul>
            {todos.map((todo) => (
                <li
                    key={todo.id}
                    style={{
                        textDecoration: todo.completed
                            ? "line-through"
                            : "none",
                    }}
                    onClick={() => toggleTodo(todo.id)}
                >
                    {todo.text}
                    <button onClick={() => deleteTodo(todo.id)}>Delete</button>
                </li>
            ))}
        </ul>
    );
};

export default DisplayTodos;

We sliced off the todos array from the state and used the Array#map method to render the todos, also we sliced off the deleteAction. The Delete button removes each todo from the list, it does this by calling the deleteAction action with the id of the todo clicked.
Now, let's build the component where we can add a todo to the list.

TodosControl

const TodosControl = () => {
    const addTodo = useStore((state) => state.addTodo);
    const [text, setText] = useState("");

    function handleSubmit(e) {
        e.preventDefault();
        addTodo(text);
        setText("");
    }

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                value={text}
                onChange={(e) => setText(e.target.value)}
            />
            <button type="submit">Add</button>
        </form>
    );
};

export default TodosControl;

This component provides us a form where we input a todo and add it to the state store. We have a state text that holds the text we type in the input element. Then, the handleSubmit function is called when the form is submitted via the Add button. Inside the handleSubmit function, the addTodo is called passing in the text in the text state as an argument. This will create and add a new todo to the todos state.

Bringing them all together:

 const App = () => {
    return (
        <>
            <DisplayTodos />
            <TodosControl />
        </>
    );
};

export default App;

Conclusion

We have come a long way. Zustand is interesting and freakingly minimal and basic to use. Mind you, what we learned here is just the basics, the power of Zustand is yet to be covered in total and it runs deep.

Let's recap. We started by introducing Zustand; how it works and how it differentiates itself from the world-popular Redux. Next, we saw how to install the Zustand library, we learned also how to set up a state in it and how to use the actions. We learned how to set up async operations in actions, how to update a state, and how to get slices off a state.