When to use useReducer over useState?

Q: When to use useReducer over useState?

import React, { useReducer } from 'react'; // Define the initial state and the reducer function const initialState = { count: 0, }; const reducer = (state, action) => { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; default: return state; } }; function Counter() { // Use the useReducer hook to manage state const [state, dispatch] = useReducer(reducer, initialState); return ( Count: {state.count} dispatch({ type: 'INCREMENT' })}>Increment dispatch({ type: 'DECREMENT' })}>Decrement ); } export default Counter;

Difficulty: 6/10

state management, hooks, performance

Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called a reducer.

javascript

Scenario Questions

0-2 years experience

1You have a simple login form with three inputs. How would you decide whether to manage each field with useState or to switch to a single useReducer, and what practical differences would you see?
2If you add a fourth field to that form while using useReducer, what steps do you take to extend the reducer and keep the component working?
3What happens if you try to update several related pieces of state with separate useState calls versus a single dispatch to a reducer?

Follow-up Questions

Can you sketch a reducer shape that would be hard to model with separate useState calls?
How does switching to useReducer change the component's re‑render pattern?
What drawbacks might you encounter if you overuse useReducer for trivial state?