Props travel in exactly one direction: a parent hands a value to its child, and the child hands it on. That rule is what makes a React 7,897 tree easy to reason about, and it is what makes two situations painful. The first is distance — a theme, a signed-in user or a locale that thirty components need, threaded by hand through every component in between. The second is complexity — state that a dozen handlers update in a dozen slightly different ways, until no single place tells you how that state can change.
React ships one answer for each. Context lets a component publish a value for an entire subtree, so any descendant can read it without a prop ever being declared in between. useReducer collects every possible state transition into one pure function, so a component dispatches a description of what happened and the reducer decides what the state becomes.
Each is useful alone. Combined, they are close to a complete state-management layer built out of nothing but React, and they handle a surprising amount of an application before an external store such as Redux 3,824 (State Management with Redux) starts to pay for itself.