Zustand: Minimalist, Boilerplate-Free Global State for React

While Redux Toolkit is exceptionally powerful for massive corporate applications, many projects simply need a clean, lightweight way to share state without configuring providers, reducers, action types, or slice files. Zustand (German for "state") has emerged as the modern developer favorite with its tiny 1 KB footprint and zero-boilerplate ergonomics.

Installation

npm install zustand

Creating and Using a Zustand Store in 30 Seconds

// src/stores/useUserStore.js
import { create } from 'zustand';

// Create a global store with state and actions combined
export const useUserStore = create((set) => ({
  user: { name: 'Aryan Singh', credits: 150 },
  isLoggedIn: true,

  // Action methods
  addCredits: (amount) => 
    set((state) => ({ 
      user: { ...state.user, credits: state.user.credits + amount } 
    })),

  logout: () => set({ user: null, isLoggedIn: false })
}));

Using the Store in Any Component (Zero Providers!):

// src/components/HeaderCredits.jsx
import React from 'react';
import { useUserStore } from '../stores/useUserStore';

export default function HeaderCredits() {
  // Selective subscription: re-renders ONLY when 'credits' changes!
  const credits = useUserStore((state) => state.user?.credits);
  const addCredits = useUserStore((state) => state.addCredits);

  return (
    <div className="credits-badge">
      <span>Credits Balance: <b>₹{credits}</b></span>
      <button onClick={() => addCredits(50)} style={{ marginLeft: '10px' }}>
        Top-up (+₹50)
      </button>
    </div>
  );
}