Zustand for client state in NextJS - Deep Dive

Overview - Zustand for client state

What is it?

Zustand is a small, fast, and simple state management library for React applications, including those built with Next.js. It helps you keep track of data that changes over time on the client side, like user inputs or UI states. Unlike more complex tools, Zustand uses a minimal API and works with React hooks to make state easy to read and update. It lets your app remember things without reloading the page or losing information.

Why it matters

Without a tool like Zustand, managing changing data in a React app can become confusing and messy, especially as the app grows. You might end up passing data through many layers of components or writing repetitive code to keep everything in sync. Zustand solves this by providing a simple, centralized place to store and update state, making your app faster and easier to maintain. This means better user experiences and less frustration for developers.

Where it fits

Before learning Zustand, you should understand basic React concepts like components, props, and hooks (especially useState and useEffect). After mastering Zustand, you can explore more advanced state management patterns, server state handling with tools like React Query, or integrating Zustand with Next.js features like server components and API routes.

Mental Model

Core Idea

Zustand is like a tiny, shared notebook where all parts of your app can read and write important information quickly and simply.

Think of it like...

Imagine a family sharing a whiteboard in the kitchen where everyone writes down what they need or what’s happening. Each family member can easily see and update the notes without shouting or passing messages through others.

┌───────────────┐
│  Zustand Store│
│  (shared state)│
└──────┬────────┘
       │
 ┌─────┴─────┐   ┌─────┴─────┐
 │Component A│   │Component B│
 │(reads/writes)│ │(reads/writes)│
 └───────────┘   └───────────┘

Build-Up - 7 Steps

1

Foundation

What is client state in React

Concept: Understanding what client state means and why React apps need to manage it.

Client state is the data that changes while you use a web app, like what you type in a form or which tab is open. React uses state to remember these changes and update the screen. The simplest way is with useState hook inside components, but this only works well for small or isolated parts.

Result

You know that client state is the changing data your app remembers and shows to users.

Understanding client state is key because it explains why we need tools like Zustand to keep data organized across many parts of an app.

2

Foundation

React hooks and state basics

Concept: Learning how React hooks like useState and useEffect work to manage and react to state changes.

useState lets you create a piece of state inside a component. useEffect runs code when state changes or when the component loads. These hooks let components remember and react to data changes, but sharing state between components requires passing props or lifting state up, which can get complicated.

Result

You can create and update state inside components and understand the limits of passing state around.

Knowing hooks well prepares you to see how Zustand simplifies sharing state without complex prop chains.

3

Intermediate

Introducing Zustand store concept

🤔Before reading on: do you think Zustand stores state inside components or outside them? Commit to your answer.

Concept: Zustand creates a central store outside components that holds state accessible anywhere in the app.

Instead of each component having its own state, Zustand lets you create a store — a special object that holds state and functions to update it. Components can then subscribe to this store to get the current state and update it directly. This avoids passing props and keeps state in one place.

Result

You can create a Zustand store and use it in components to read and update shared state.

Understanding that Zustand stores state outside components unlocks a simpler way to share data across your app.

4

Intermediate

Using hooks to access Zustand state

🤔Before reading on: do you think Zustand uses class components or hooks to connect state? Commit to your answer.

Concept: Zustand uses React hooks to let components subscribe to parts of the store and update state reactively.

Zustand provides a custom hook you create from the store. Inside components, you call this hook to get state values and functions. When the state changes, components automatically re-render with new data. This works like useState but with shared state.

Result

Components update automatically when Zustand state changes, keeping UI in sync.

Knowing Zustand uses hooks fits naturally with React’s way of working and makes state sharing feel seamless.

5

Intermediate

Updating and subscribing to state slices

🤔Before reading on: do you think components re-render when any part of Zustand state changes or only the parts they use? Commit to your answer.

Concept: Zustand lets components subscribe only to the parts of state they need, avoiding unnecessary updates.

When you use the Zustand hook, you can pick specific pieces of state or functions. Zustand tracks these selections and only re-renders components when those parts change. This improves performance and keeps your app fast.

Result

Your app updates only the components that need to change, saving resources.

Understanding selective subscriptions helps you write efficient apps that don’t waste work on unrelated updates.

6

Advanced

Persisting Zustand state across reloads

🤔Before reading on: do you think Zustand saves state automatically between page reloads? Commit to your answer.

Concept: Zustand can save state to browser storage so data stays even if the user refreshes the page.

By adding middleware to your Zustand store, you can tell it to save state to localStorage or sessionStorage. When the app reloads, Zustand reads this saved state and restores it. This is useful for things like user preferences or shopping carts.

Result

Your app remembers important data even after closing or refreshing the browser.

Knowing how to persist state makes your apps feel more reliable and user-friendly.

7

Expert

Zustand internals and React integration

🤔Before reading on: do you think Zustand uses React context internally or manages subscriptions differently? Commit to your answer.

Concept: Zustand manages state outside React context and uses a custom subscription system for efficient updates.

Unlike some libraries that use React context (which can cause many re-renders), Zustand keeps state in a standalone store object. It tracks which components use which parts of state and only notifies those components when needed. This reduces unnecessary renders and improves performance. Zustand’s simple API hides this complexity but it’s key to its speed.

Result

You understand why Zustand is fast and scales well even in large apps.

Knowing Zustand’s internal subscription model explains why it outperforms context-based state management in many cases.

Under the Hood

Zustand creates a store object that holds state and update functions. Components use a custom hook that subscribes to this store. When state changes, Zustand compares which parts each component uses and triggers re-renders only for those components. It avoids React context to prevent broad re-renders. Middleware can wrap the store to add features like persistence or logging.

Why designed this way?

Zustand was designed to be minimal and fast, avoiding the complexity and performance issues of React context or Redux. By keeping state outside React and using fine-grained subscriptions, it achieves better performance and simpler code. The API is small to reduce learning overhead and encourage adoption.

┌───────────────┐
│ Zustand Store │
│ (state + fn) │
└──────┬────────┘
       │
┌──────┴───────┐
│ Subscription │
│  Manager    │
└──────┬───────┘
       │
┌──────┴───────┐   ┌─────────────┐
│Component A   │   │Component B   │
│(subscribed) │   │(subscribed) │
└─────────────┘   └─────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does Zustand require React context to share state? Commit yes or no.

Common Belief: Zustand uses React context internally to share state across components.

Reality: Zustand manages state outside React context and uses its own subscription system.

Why it matters: Believing Zustand uses context can lead to wrong assumptions about performance and debugging, missing its key advantage.

Quick: Does Zustand automatically persist state between page reloads? Commit yes or no.

Common Belief: Zustand saves state automatically so data is never lost on reload.

Reality: Persistence requires adding middleware explicitly; Zustand does not save state by default.

Why it matters: Assuming automatic persistence can cause data loss bugs if developers forget to add persistence.

Quick: If one part of Zustand state changes, do all components re-render? Commit yes or no.

Common Belief: Any state change in Zustand causes all components using the store to re-render.

Reality: Only components subscribed to the changed parts re-render, improving performance.

Why it matters: Misunderstanding this can lead to unnecessary optimization or confusion about app behavior.

Quick: Is Zustand only suitable for small apps? Commit yes or no.

Common Belief: Zustand is only good for small projects because it’s simple.

Reality: Zustand scales well to large apps due to its efficient subscription model and middleware support.

Why it matters: Underestimating Zustand’s power may prevent developers from using a lightweight, performant solution in bigger projects.

Expert Zone

1

Zustand’s subscription system uses shallow comparison by default, but you can customize selectors to optimize re-renders further.

2

Middleware in Zustand can be composed to add features like persistence, logging, or devtools integration without changing core logic.

3

Zustand’s store can be used outside React components, enabling state sharing with non-React code or server-side logic.

When NOT to use

Zustand is not ideal when you need complex server state synchronization or caching; tools like React Query or Apollo Client are better suited. Also, for very large apps with strict typing needs, Redux with TypeScript might offer more structure.

Production Patterns

In production, Zustand is often combined with middleware for persistence and devtools. It’s used to manage UI state like modals, forms, and theme settings. Teams use it for rapid prototyping and scaling apps without boilerplate. Zustand’s minimal API reduces bugs and improves maintainability.

Connections

React Context API

Alternative approach to share state across components

Understanding Zustand’s difference from React Context helps grasp why it can be more performant and simpler for many use cases.

Observer Pattern (Software Design)

Zustand implements a form of observer pattern for state updates

Recognizing Zustand as an observer pattern example clarifies how components subscribe and react only to relevant state changes.

Shared Memory in Operating Systems

Both provide a centralized place for multiple users to read and write data safely

Knowing how shared memory works in OS helps understand the importance of controlled access and updates in Zustand’s store.

Common Pitfalls

#1 Updating state directly without using Zustand’s setter functions

Wrong approach:

const store = useStore(); store.count = store.count + 1; // wrong

Correct approach:

const increment = useStore(state => state.increment); increment(); // right

Root cause:

Misunderstanding that Zustand state is immutable and must be updated via provided functions to trigger re-renders.

#2 Subscribing to the entire store instead of selecting needed slices

Wrong approach:

const state = useStore(); // subscribes to whole store

Correct approach:

const count = useStore(state => state.count); // subscribes only to count

Root cause:

Not using selectors causes unnecessary re-renders and performance issues.

#3 Expecting state persistence without adding middleware

Wrong approach:

const useStore = create(set => ({ count: 0 })); // no persistence

Correct approach:

const useStore = create(persist(set => ({ count: 0 }), { name: 'app-storage' }));

Root cause:

Assuming persistence is built-in rather than an optional feature.

Key Takeaways

Zustand is a minimal and fast state management library that stores client state outside React components.

It uses hooks to let components subscribe to only the parts of state they need, improving performance.

Middleware can extend Zustand with features like persistence and logging, making it flexible for real apps.

Understanding Zustand’s subscription model explains why it often outperforms React context for shared state.

Zustand fits naturally in React and Next.js apps, simplifying state sharing without complex boilerplate.