Zustand Mastery: The Minimal State Manager for React

Why Zustand?

Zustand is a small, fast, and scalable state management library. Unlike Redux, there's no providers, actions, reducers, or dispatch. Unlike Context, it doesn't cause unnecessary re-renders. Just a hook.

Basic Store

import { create } from 'zustand';
interface BearState {
bears: number;
increase: () => void;
removeAll: () => void;
}
const useBearStore = create((set) => ({
bears: 0,
increase: () => set((state) => ({ bears: state.bears + 1 })),
removeAll: () => set({ bears: 0 }),
}));
// Usage in component
function BearCounter() {
const bears = useBearStore((state) => state.bears);
const increase = useBearStore((state) => state.increase);
return <div>{bears}<button onClick={increase}>+</button></div>;
}

Production Pattern: Slice Pattern

const createUserSlice = (set) => ({ user: null, setUser: (user) => set({ user }) });
const createCartSlice = (set) => ({ cart: [], addItem: (item) => set((state) => ({ cart: […state.cart, item] })) });

const useStore = create((…a) => ({
…createUserSlice(…a),
…createCartSlice(…a),
}));

Performance Tips

• Use selectors to avoid re-renders: const bears = useBearStore(state => state.bears) instead of destructuring whole store.
• Use shallow equality for nested objects: import { shallow } from ‘zustand/shallow’

Interview Q&A

Q: How does Zustand prevent unnecessary re-renders? It uses strict equality checks by default – only re-renders when selected slice changes.
Q: Can Zustand handle async actions? Yes – just make the action async and call set when done.

Conclusion

Zustand is the best state manager for most React apps. It’s simple, performant, and scales from small to large.