Zustand

Definition

A minimalist, fast, and highly popular global state management library for React that requires almost zero boilerplate compared to Redux or Context.

Explain Like I'm New

React Context is great for things that rarely change (like Themes). But if you have complex, rapidly changing state (like a drag-and-drop Kanban board), Context will cause your entire app to lag and re-render. Zustand solves this by storing state outside of React, and only updating the exact components that need it.

Real World Example

Managing the complex state of an E-commerce Shopping Cart across the Navbar, Checkout Page, and Product Pages without causing the entire layout to re-render when an item is added.

Common Use Cases

•Complex client state
•High-performance interactive UIs

Interactive Example

// 1. Create the Store (store.ts)
import { create } from 'zustand';

interface CartState {
  bears: number;
  increase: () => void;
}

// Extremely simple API! No reducers, no providers, no boilerplate.
export const useCartStore = create<CartState>((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
}));

// 2. Use it in a Client Component
'use client';
import { useCartStore } from './store';

export function BearCounter() {
  // Only this exact component re-renders when 'bears' changes!
  const bears = useCartStore((state) => state.bears);
  const increase = useCartStore((state) => state.increase);
  
  return <button onClick={increase}>{bears} bears</button>;
}

Interview Questions

basic

Does Zustand require you to wrap your entire application in a `<Provider>` component?

intermediate

Can you access Zustand state inside a Next.js Server Component?

Flash Cards

Question

Require Provider?

Click to reveal answer

Answer

No! That is the main appeal of Zustand. You just define the store in a file, import the hook, and use it anywhere.

Question

Access in Server Component?

Click to reveal answer

Answer

No. State management libraries (Zustand, Redux, Context) manage *Client* state (interactivity). Server Components run once and die; they do not have state.