DEV Community

Cover image for Simplifying State Management in React with Zustand
Sheraz Manzoor
Sheraz Manzoor

Posted on • Updated on

Simplifying State Management in React with Zustand

Effective state management is vital for building resilient and scalable React applications. While powerful libraries like Redux and MobX are available, they can sometimes seem too elaborate for smaller projects or straightforward use cases. Enter Zustand, a lightweight and intuitive state management library that simplifies the process without sacrificing flexibility. In this blog post, we'll explore what Zustand is, why you might want to use it, and how to get started.

What is Zustand?

Zustand (pronounced "zoo-shtand", meaning "state" in German) is a compact, high-performance, and adaptable state management solution tailored for React applications. Developed by the expert team behind Jotai and React Spring, Zustand strives to deliver a concise and minimal API that prioritizes seamless usability and optimal performance.

Why Use Zustand?

  • Simplicity: Zustand's API is very simple and intuitive, making it an attractive option for developers seeking to bypass the unnecessary complexity and verbose coding typically required by more robust state management libraries.
  • Excellent Performance: Zustand is built with performance in mind. It avoids unnecessary re-renders and ensures that your application remains fast and responsive.
  • Flexibility: Zustand can be used for both global and local state management. It allows you to manage state in a way that best suits your application's needs.

Getting Started with Zustand

Let's have a look how to set up and use Zustand in a React application.

Installation:

First, you'll need to install Zustand. You can do this using npm or yarn:

npm install zustand

or

yarn add zustand

Creating a Store

In Zustand, state is managed through a store. A store is essentially a JavaScript function that returns an object containing your state and any associated actions:

import { create } from 'zustand';

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

In the example above, we create a store with an initial state containing a count property and two actions, increase and decrease, which update the count property.

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

const ZustandDemor = () => {
  const { count, increase, decrease } = useStore();

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

export default ZustandDemo;
Enter fullscreen mode Exit fullscreen mode

In this example, we use the useStore hook to retrieve the count state and the increase and decrease actions. We then render a simple counter component with buttons to increase and decrease the count.

Handling Async Actions

Zustand also makes it easy to handle asynchronous actions. You can define async actions within your store using async functions.

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
  fetchCount: async () => {
    const response = await fetch('/api/count');
    const data = await response.json();
    set({ count: data.count });
  },
}));
Enter fullscreen mode Exit fullscreen mode

In the example above, we define a fetchCount action that fetches the count from an API and updates the state accordingly.

Advanced Usage

Middleware

Zustand supports middleware to enhance your store with additional functionality. For example, you can use the redux middleware to add Redux-like devtools support to your store.

import { devtools } from 'zustand/middleware';

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

Enter fullscreen mode Exit fullscreen mode

Persistence

To persist your state across page reloads, you can use the persist middleware.

import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
      decrease: () => set((state) => ({ count: state.count - 1 })),
    }),
    {
      name: 'count-storage', // Name of the storage item
      getStorage: () => localStorage, // Specify the storage type
    }
  )
);

Enter fullscreen mode Exit fullscreen mode

In this example, we use the persist middleware to save the count state to localStorage.

Conclusion

Zustand is a powerful yet simple state management solution for React or Next applications. Its minimal API, performance optimizations, and flexibility make it a great choice for both small and large projects. Whether you're building a complex application or a simple component, Zustand can help you manage your state easily.
Give Zustand a try in your next project and experience the benefits of a lightweight and intuitive state management library!

Top comments (3)

Collapse
 
tracygjg profile image
Tracy Gilmore

Hi, The code of your post might look better with syntax highlighting.

Collapse
 
sheraz4194 profile image
Sheraz Manzoor

Great point, thanks for this great piece of dvice.

Collapse
 
xaviour_90 profile image
Xaviour

Thank You very much for your efforts. I am a beginner; I was always struggling with react useState hook, which takes a lot of time and effort, but I was really lucky to search on google about best ways for react state management and I found this blog. Thanks much!!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.