{"id":116,"date":"2026-10-06T05:50:04","date_gmt":"2026-10-06T05:50:04","guid":{"rendered":"https:\/\/webdevpuneet.com\/blog\/?p=116"},"modified":"2026-10-06T05:50:08","modified_gmt":"2026-10-06T05:50:08","slug":"react-usestate-vs-usereducer-when-should-you-use-each","status":"publish","type":"post","link":"https:\/\/webdevpuneet.com\/blog\/react-usestate-vs-usereducer-when-should-you-use-each\/","title":{"rendered":"React useState vs useReducer: When Should You Use Each?"},"content":{"rendered":"

<\/p>\n\n\n

Both hooks do the exact same job \u2014 they hold state and trigger a re-render when it changes. The real question isn’t “which one is more powerful,” it’s how you want to describe an update<\/strong>: with useState<\/strong>, the caller hands over the next value directly \u2014 setCount(count + 1)<\/code> says “the count is now this.” With useReducer<\/strong>, the caller hands over a description of what happened \u2014 dispatch({ type: 'increment' })<\/code> says “this occurred,” and one function, the reducer, is the only place that decides what it means for the state. Once that distinction clicks, most “which hook do I reach for” questions answer themselves.<\/p>\n\n\n\n

The 10 demos below are all real, running React \u2014 click a button, dispatch an action, watch a log \u2014 so you can see each hook’s actual behavior instead of reading about it secondhand. Several place the same feature under both hooks so the difference isn’t a claim, it’s something you can click through and feel.<\/p>\n\n\n\n

Every embed also has a Fork & Edit<\/strong> button that opens the exact snippet, already running, in My Code<\/a> \u2014 webdevpuneet’s free in-browser editor. Swap a useState<\/code> call for a useReducer<\/code> one on a real component and watch what changes \u2014 that’s a faster way to build real intuition than any explanation. One note on the code you’ll see: these demos skip a build step, so the live JS uses React.createElement<\/code> directly instead of JSX \u2014 the logic is identical to the JSX version in every rule snippet below, just without a compiler in between.<\/p>\n\n\n\n

The one-sentence rule<\/h2>\n\n\n\n
\/\/ useState: the caller computes and hands over the next value\nconst [count, setCount] = useState(0);\nsetCount(count + 1);\n\n\/\/ useReducer: the caller describes what happened; the reducer decides the rest\nconst [state, dispatch] = useReducer(reducer, { count: 0 });\ndispatch({ type: 'increment' });<\/code><\/pre>\n\n\n\n
useState<\/code> is a direct pipe: you read the current value, compute the next one yourself, and hand it to the setter. That’s ideal when the “next value” logic is genuinely simple and lives comfortably next to wherever you’re calling it from. useReducer<\/code> adds one layer of indirection \u2014 a pure (state, action) => newState<\/code> function that owns every transition \u2014 which pays for itself the moment there’s more than one way to reach the same state, more than one field that needs to change together, or logic complex enough that you’d like to read it, and test it, in one place instead of scattered across event handlers.<\/p>\n\n\n\n
1. Same Counter, Two Hooks<\/h2>\n\n\n\n
Flip the toggle \u2014 the exact same counter UI, rebuilt twice: once with useState, once with useReducer. Click +, \u2212, and Reset on each side.<\/p>\n\n\n\n