React State Management - Zustand

Zustand is a simple state management library.

Install

npm install zustand

Creating Store

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 })
}));

Using Store

function Counter() {
  const { count, increment, decrement, reset } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

Async Actions

const useStore = create((set) => ({
  users: [],
  fetchUsers: async () => {
    const response = await fetch('/api/users');
    const users = await response.json();
    set({ users });
  }
}));

Selectors

const count = useStore((state) => state.count); // Only re-renders when count changes

Remember

• Simpler than Redux
• No boilerplate
• Works outside React
• Good for medium apps

Next: Learn Redux Toolkit!