React State Management: useState vs useReducer vs Context vs Zustand

// Simple state: use useState
function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');
  // Independent pieces of state — separate useState calls
  return setCount(c=>c+1)}>{count};
}

// Object state: OK for related values
function Form() {
  const [form, setForm] = useState({name:'',email:'',age:''});
  const update = field => e =>
    setForm(prev=>({...prev,[field]:e.target.value}));
  return (
    <>
      
      
    
  );
}

// Use when: multiple sub-values, next state depends on previous
const initialState = { status:'idle', data:null, error:null };

function reducer(state, action) {
  switch(action.type) {
    case 'FETCH_START':   return {...state, status:'loading', error:null};
    case 'FETCH_SUCCESS': return {status:'success',data:action.payload,error:null};
    case 'FETCH_ERROR':   return {...state, status:'error', error:action.error};
    case 'RESET':         return initialState;
    default: throw new Error('Unknown action: '+action.type);
  }
}

function DataFetcher({url}) {
  const [state, dispatch] = useReducer(reducer, initialState);
  useEffect(() => {
    dispatch({type:'FETCH_START'});
    fetch(url).then(r=>r.json())
      .then(data=>dispatch({type:'FETCH_SUCCESS',payload:data}))
      .catch(err=>dispatch({type:'FETCH_ERROR',error:err.message}));
  }, [url]);
}

// GOOD: Context for slow-changing global values
const ThemeContext = createContext('light');
const AuthContext = createContext(null);

// BAD: Context for frequent updates (every update re-renders all consumers)
// Don't use Context for: shopping cart (updated on every add/remove)
// Do use Context for: theme, locale, auth user, feature flags

function App() {
  const [theme, setTheme] = useState('light');
  return (
    
      
    
  );
}

// Consume:
const {theme} = useContext(ThemeContext);

import {create} from 'zustand';

// Define store
const useCartStore = create((set,get) => ({
  items: [],
  total: 0,
  addItem: (item) => set(state => ({
    items: [...state.items, item],
    total: state.total + item.price
  })),
  removeItem: (id) => set(state => ({
    items: state.items.filter(i=>i.id!==id),
    total: state.total - (state.items.find(i=>i.id===id)?.price||0)
  })),
  clear: () => set({items:[],total:0})
}));

// Use in any component (no Provider needed!)
function CartIcon() {
  const {items} = useCartStore();
  return {items.length};
}