useContext

Context lets you pass data through the tree without handing props at every level.

Use it for theme, current user, or locale. Do not use it for every piece of state.

Create, provide, consume

Page does not have to know about theme. Button still reads it.

Default value

createContext('light') is used when no Provider sits above. That helps tests and isolated stories.

When context re-renders

If value is a new object every render, every consumer re-renders.

Put object values in state, or memoize them, so the identity is stable.

Prop drilling vs context

Three levels of a title prop is fine. Fifteen levels of currentUser is why context exists.

Do not hide a tightly coupled parent-child pair behind context. Props are clearer.

Tip: One context per concern. ThemeContext and UserContext, not a giant AppContext blob.