state management with zustand

Zustand is “a small, fast and scalable barebones state-management solution using simplified flux principles. It has a comfy API based on hooks. It isn't "boilerplatey" or opinionated.”

According to the developer’s GitHub readme, “a lot of time was spent dealing with common pitfalls, like the dreaded zombie child problem, react concurrency and context loss between mixed renderers.”

Getting started with Zustand

To get started with Zustand, you have to install the package from npm using:

npm install zustand
 or 
yarn add zustand

Steps to connect zustand to your react app

After installing Zustand, create a store folder in your app directory. Although you can create a store file, for proper structure, creating a store folder will be better. The store folder contains all stores you want to create for your application.

Now, let’s take a step back. For those who do not know what it is, a store is a hook which provides the state of the application. According to Zustand’s readme, “You can put anything in it: primitives, objects, functions. State has to be updated immutably and the set function merges state to help it.”

Screenshot (45).png

You can create a store that suits your app needs.

Practical steps

Let’s create a store for bear population, for example. This store holds the bears' data, adds bears to the population, and reduces the bears' population.

The first step is to create useBearStore.js

In the useBearStore.js, you import the Zustand package

import create from zustand

Then you create your hook to set up the store as below:

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

Now, we’ve set up our store. It’s time to use it in our application. Let’s display bears in a component called BearCounter.js In BearCounter, we import useBearStore:

import useBearStore from './store/useBearStore;

Then we can destructure bears from the store

const { bears } = useBearStore();

Then we can use the bear value in our jsx. The final structure will look like this:

import create from 'zustand'

function BearCounter() {
  const { bears } = useBearStore();
  return <h1>{bears} around here ...</h1>
}

That is a basic use case of the Zustand store.

Why zustand over redux?

Simple and un-opinionated
Makes hooks the primary means of consuming state
Doesn't wrap your app in context providers
Can inform components transiently (without causing render)

Why zustand over context?

Less boilerplate
Renders components only on changes
Centralized, action-based state management

Summary

We’ve had a look at the Zustand package and how it works. One thing that Zustand has over other state management packages in React is that it is very easy to set up. This cannot be said for Redux. In a matter of minutes, you’ve set up your store and can already start managing your state.

Try it out today. You can take a look at their documentation here

Zustand: The most stress-free state management package?

Table of contents