Zustand: State Management Simplified

If Redux is a heavy tank, Zustand is a sports car. It is a small, fast, and scalable state management solution based on Hooks. It has zero boilerplate and follows the simple philosophy of: "Define a store, use the hook."

1. Why Zustand?

• No Provider: You don't need a <Provider> at the root. This prevents the "Context Re-render" problem.
• Transient State: It can update state without triggering a React re-render for high-frequency data (like mouse position).
• Small Bundle: It is less than 1KB gzipped.

const useStore = create((set) => ({
    count: 0,
    inc: () => set((state) => ({ count: state.count + 1 })),
}))

4. Interview Mastery

Q: "How does Zustand prevent unnecessary re-renders compared to Context API?"

Architect Answer: "Context API has a fundamental flaw: when a Provider's value changes, *every* consumer re-renders, even if they only use a piece of the data that didn't change. Zustand uses a **Selector-based Subscription**. You tell the hook exactly which part of the state you want: `const count = useStore(s => s.count)`. If another property in the store changes, your component won't even wake up."