Context / Provider
A way to give shared data to every component in one branch without passing it through each layer as props.
See it
What it is
Context lets a component read a value supplied by the nearest matching provider above it, even when several components sit between them. The createContext API React uses today arrived in 16.3. Context is scoped to a subtree, which makes it a good fit for facts such as theme, locale, the current account, or a compound component's shared state.
Reach for it when many branches genuinely need the same value and ordinary props have turned middle components into couriers. Keep the provider close to the consumers, expose a small custom Hook, and make that Hook fail clearly when no provider exists.
Gotcha: Context removes prop wiring, not updates. When a provider gets a different value, its consumers re-render. A fresh object or function created on every parent render therefore wakes every consumer, so split contexts by update frequency and stabilize compound values when measurement shows it matters.
Ask AI for it
Replace this theme prop chain with a typed React Context created by createContext. Add a ThemeProvider that owns the value, expose a useTheme Hook using useContext that throws outside the provider, and wrap the value object in useMemo with complete dependencies. Split theme state from high-frequency cursor state so changing the cursor does not re-render every theme consumer.