When would you use useState versus useReducer in React?
Reported in HelloFresh European engineering loops. React hooks question on local state complexity and predictable updates.
Interview scenario
Often asked in HelloFresh loops at European offices (London, Berlin, Amsterdam, Paris, Stockholm, Dublin, and remote EU). Prepare a clear spoken answer plus key trade-offs.
Model answer
Try answering aloud first
Cover trade-offs, structure, and a concrete example before revealing the baseline response.
How to frame this at HelloFresh: Connect your answer to measurable impact, clarity of thought, and trade-offs the team cares about. Below is a strong baseline response you can adapt with your own project examples.
useState fits simple independent values—toggle, form field, counter. Updates are direct: setCount(c => c + 1).
useReducer fits complex state with multiple fields updated together, next state depending on previous, or many event types—wizard flows, shopping cart, reducers with typed actions improve testability.
function reducer(state, action) {
switch (action.type) {
case "increment": return { ...state, count: state.count + 1 };
case "reset": return initialState;
default: return state;
}
}Reducer logic is pure and unit-testable without rendering. For global app state at scale, Context + reducer or libraries (Redux, Zustand) avoid prop drilling.
Mention performance: split state so unrelated components do not re-render; avoid storing derived data—compute on render or memoize.
Discussion
Comments (0)
Share how this question came up in your loop, or add tips for others preparing.
Log in to comment on this question.