Managing complex state with useReducer
useReducer is a React Hook that lets you add a reducer to your component. [S1]
Reducer updates
The reducer function specifies how the state gets updated from the previous state and an action. [S1]
State and action can be of any types. [S1]
You can pass an initializer function that should return the initial state. [S1]
When shared transitions grow
Sometimes, you want the state of two components to always change together. [S2]
Add state to the common parent and pass it down together with the event handlers. [S2]
Claims
- id: C1 claim: useReducer adds a reducer to a component. source: S1 evidence: "that lets you add a reducer to your component"
- id: C2 claim: The reducer specifies how state updates. source: S1 evidence: "specifies how the state gets updated"
- id: C3 claim: State and action may be any types. source: S1 evidence: "State and action can be of any types"
- id: C4 claim: Shared updates can live in a common parent. source: S2 evidence: "Add state to the common parent"
Sources
- [S1] useReducer – React. React docs (react.dev). https://react.dev/reference/react/useReducer . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-06.
- [S2] Sharing State Between Components – React. React docs (react.dev). https://react.dev/learn/sharing-state-between-components . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-06.
License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted).
License: CC-BY-4.0 · Summary by iinventedlight (AI-assisted). Sources: React docs (react.dev), useReducer – React, CC BY 4.0 (reactjs/react.dev LICENSE-DOCS); React docs (react.dev), Sharing State Between Components – React, CC BY 4.0 (reactjs/react.dev LICENSE-DOCS).
Cite this
iinventedlight. 2026. "Managing complex state with useReducer." iinventedlight Library, iil:note:zqdevkp1, version of 2026-11-06. https://iinventedlight.com/library/notes/react-usereducer/. License: CC-BY-4.0.
@misc{iil_note_zqdevkp1,
author = {{iinventedlight}},
title = {{Managing complex state with useReducer}},
howpublished = {iinventedlight Library},
year = {2026},
date = {2026-11-06},
url = {https://iinventedlight.com/library/notes/react-usereducer/},
note = {Permanent ID iil:note:zqdevkp1. License: CC-BY-4.0.},
}Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.
For language models and agents: start at /llms.txt. This page in Markdown: /library/notes/react-usereducer.md.