Drills Repository
26 Drills · All Belts · usereducer
useReducer centralizes state logic
useReducer consolidates update logic into a single reducer function, making related state transitions more organized and easier to reason about than scattered setter calls. This is especially valuable when multiple pieces of state change together in response to the same events.
dispatch updates next render only
Calling dispatch schedules a future render but does not mutate the existing state variable within the currently running event handler. React state behaves as a fixed snapshot tied to the render it was read in, so logging state.age immediately after dispatch still reads the old value.
Reducer centralizes state logic
As a component grows, state updates scattered across many event handlers become difficult to track and reason about. useReducer centralizes that update logic into a single reducer function, making the component's state transitions easier to read and maintain.
Action objects describe events
Actions describe user events or state transitions in a structured way. The reducer then decides how to compute the next state from that description.
Reducer function signature
A reducer function receives the current state and an action object, then returns the next state React should use. This pure transformation model is the foundation of reducer-based state management.
useReducer return values
useReducer(reducer, initialState) returns an array containing the current state and a dispatch function used to send actions to the reducer. The array destructuring pattern const [state, dispatch] = useReducer(reducer, initialState) mirrors useState, but dispatch sends actions to the reducer instead of setting values directly.
dispatch identity stability
React guarantees that the dispatch function returned by useReducer keeps the same identity across renders. Since it never changes, it usually does not need to appear in dependency arrays.
Reducer must return next state
Reducers must explicitly return the next state from every branch. Omitting return in a switch-based reducer can cause fallthrough into another case or produce undefined, resulting in an incorrect state update.
Reducer actions and batching
React batches state updates that occur within the same event handler and applies them together in a single render after the handler finishes executing. This avoids unnecessary intermediate renders rather than repainting the screen after each individual dispatch.
Dispatch queues updates like setState
Like a state setter, dispatch queues an update to be processed on the next render rather than mutating the current render's state snapshot immediately. The reducer runs and the new state becomes available only once React re-renders the component.
Reducers must stay pure
A reducer should be a pure function that only calculates the next state from the current state and the dispatched action. Side effects inside a reducer produce unpredictable behavior, particularly under Strict Mode, where React may invoke reducers multiple times in development to surface such impurities.
Reducer must return new object
React compares the previous and next state using Object.is, which checks reference identity rather than deep contents. If a reducer mutates the existing state object and returns that same reference, React sees no change and can skip re-rendering.