React State Management - Zustand

Zustand is a simple state management library.

Install

```bash npm install zustand ```

Creating Store

```javascript 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

```javascript 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

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

Selectors

```javascript 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!