⚛️ React.js Intermediate

What is the difference between useState and useReducer?

Answer

Both manage state in function components, but they serve different use cases. useState is simpler — best for independent pieces of state: booleans, strings, numbers, simple objects. Each call manages one value. useReducer centralizes state updates into a pure reducer function — best when: (1) State is a complex object with multiple sub-values. (2) State updates depend on each other. (3) There are many different ways to update state (many action types). (4) The next state depends on the previous state in complex ways. (5) You want to extract and test state logic separately. Mental model: useState = simple variable; useReducer = Redux-lite (state + actions + reducer). When to migrate: if you find yourself writing many related useState calls that update together, or complex conditional update logic, refactor to useReducer. Performance: useReducer can be marginally more efficient in some cases because the dispatch function is stable (never recreated). useReducer + useContext: combine for lightweight global state management that avoids Redux for medium-sized apps.