Master Zustand: A Lightweight Yet Powerful State Management Library for React

Introduction

State management is a crucial topic in frontend development, with many options such as Redux, MobX, and Context API. This article introduces Zustand, a lightweight yet powerful state management library for React.

Concept and Advantages

What is Zustand?

Zustand (German for “state”) is a simple, flexible JavaScript library for managing state in React applications, developed by the Poimandres team.

Why Choose Zustand?

Lightweight and Simple : Minimal API with no boilerplate compared to complex libraries like Redux.

No Dependencies : Pure JavaScript library without external dependencies.

Flexibility : No enforced patterns; you can adopt any state management style.

Performance : Uses immutable data structures and shallow comparison for smooth updates.

How to Use Zustand

Installation

<code>npm install zustand</code>

<code>yarn add zustand</code>

Creating a Simple Store

Use the create function to define a store. Example of a counter:

<code>import create from 'zustand';

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

export default useStore;</code>

Using the store in a component:

<code>import React from 'react';
import useStore from './store';

function Counter() {
  const { count, increase, decrease } = useStore();
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
}

export default Counter;</code>

API Overview

create

The core function that creates a store.

<code>import create from 'zustand';
const useStore = create(set => ({ /* state and actions */ }));</code>

set

Updates state; accepts a partial state object or an updater function.

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

get

Retrieves the current state, usable inside updater functions.

<code>const useStore = create((set, get) => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 })),
  fetchData: async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    set({ data });
  }
}));</code>

subscribe

Registers a listener for state changes.

<code>const unsubscribe = useStore.subscribe(
  state => state.count,
  count => console.log('Count changed to', count)
);
// later
unsubscribe();</code>

destroy

Destroys the store and clears all subscriptions.

<code>useStore.destroy();</code>

setState & getState

Directly set or get the entire state object (use with caution).

<code>useStore.setState({ count: 10 });
const current = useStore.getState();
console.log(current.count);
</code>

useStore Hook

Access state and actions inside React components.

<code>import React from 'react';
import useStore from './store';

function Counter() {
  const { count, increase, decrease } = useStore();
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
}
</code>

Practical Application Tips

Asynchronous State Updates : Perform async operations inside updater functions and then call set with the new data.

Middleware : Extend functionality with middleware such as Redux compatibility, persistence, or logging.

State Persistence : Use persist middleware to store state in localStorage or sessionStorage .

DevTools Support : Integrate with Redux DevTools via the devtools middleware for easier debugging.

Best practices include splitting large stores into smaller, domain‑specific ones, providing sensible default values, avoiding unnecessary state changes, leveraging TypeScript for type safety, and using selectors to minimize re‑renders.

Core Principles of Zustand

The create function receives an initializer that provides set and get methods. State updates are performed with set , while get allows reading the current state inside updater functions.

Immutable Data Structures

Updates produce new state objects rather than mutating the existing one, ensuring predictable behavior.

Shallow Comparison Optimization

Components re‑render only when top‑level state properties change, reducing unnecessary renders.

Using Zustand with Next.js

Client‑side rendering works out of the box. For server‑side rendering, create a fresh store per request using getServerSideProps or getStaticProps and hydrate the client.

<code>import create from 'zustand';

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

export const getServerSideProps = async () => {
  const store = useStore.getState();
  return { props: { initialState: store } };
};

export default function Page({ initialState }) {
  const { count, increase, decrease } = useStore();
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
}
</code>

Conclusion

Zustand offers a powerful, flexible solution for managing state in React applications of any size. Understanding its core concepts, API, middleware ecosystem, and integration patterns—especially with Next.js—enables developers to improve productivity and code quality while keeping applications performant.