State Management Libraries

Zustand - Lightweight State Management

npm install zustand

import create from 'zustand';

interface CartStore {
  items: CartItem[];
  addItem: (item: CartItem) => void;
  removeItem: (id: string) => void;
  clearCart: () => void;
}

const useCartStore = create<CartStore>(set => ({
  items: [],
  addItem: item => set(state => ({ items: [...state.items, item] })),
  removeItem: id =>
    set(state => ({ items: state.items.filter(i => i.id !== id) })),
  clearCart: () => set({ items: [] }),
}));

// Usage
function Cart() {
  const items = useCartStore(state => state.items);
  const addItem = useCartStore(state => state.addItem);

  return <div>{items.length} items</div>;
}

Redux Toolkit

npm install @reduxjs/toolkit react-redux

import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => {
      state.value += 1;
    },
    decrement: state => {
      state.value -= 1;
    },
  },
});

const store = configureStore({
  reducer: { counter: counterSlice.reducer },
});

// Usage
import { useDispatch, useSelector } from 'react-redux';

function Counter() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(counterSlice.actions.increment())}>
        +
      </button>
      {count}
    </div>
  );
}

Comparison

Feature	Context API	Zustand	Redux Toolkit
Bundle Size	Included	~1KB	~10KB
Learning Curve	Easy	Easy	Medium
DevTools	No	Yes	Yes
Middleware	No	Yes	Yes
Best For	Simple state	Medium apps	Large apps