useState vs useReducer in React
Both manage state in a function component. The choice comes down to how complex your state transitions are.
When each fits
useState is perfect for simple, independent values. useReducer centralises update logic in one pure reducer(state, action) — reach for it when state has many sub-values that change together, when the next state depends intricately on the previous, or when you want testable transitions outside the component.
1function reducer(state, action) {
2 switch (action.type) {
3 case 'inc': return { count: state.count + 1 };
4 case 'reset': return { count: 0 };
5 default: return state;
6 }
7}
8const [state, dispatch] = useReducer(reducer, { count: 0 });A useful bonus
useReducer's dispatch function is stable across renders, so passing it down doesn't break memoized children — handy for deep component trees and context-based stores.
Get the full hooks deep-dive
useState, useReducer, useMemo, useCallback and custom hooks — with the reasoning interviewers want in the React Interview Kit.
⚡ Get the React Interview Kit → ₹399Frequently asked questions
- Is useReducer faster than useState?
- No — it's about organising complex update logic, not performance. For simple values, useState is simpler.
- Can I build a Redux-like store with it?
- Yes — useReducer in a context provider gives you a mini global store. React Query/Zustand are better for server state and high-churn global state.