Context API Interview Questions — Easy

• React's built-in mechanism for passing data through the component tree without threading props through every intermediate layer ("prop drilling").
• A Provider supplies a value; any descendant consumer reads it regardless of depth.
• Solves: theming, locale, authenticated-user identity, feature flags - low-frequency globals needed by distant leaves.
• Not a state manager by itself: it distributes values; change logic still lives in useState/useReducer above it.

---

const ThemeContext = createContext('light');          // default value
<ThemeContext.Provider value="dark">
  <Toolbar />                                          // reads 'dark'
</ThemeContext.Provider>

Consumer (modern):

const theme = useContext(ThemeContext);

Legacy <ThemeContext.Consumer>{v => ...}</ThemeContext.Consumer> still exists but hooks replaced it. The default value only applies when NO provider exists above - useful for testing and optional contexts.

---

• Props: data consumed by few, nearby components; explicitness aids tracing.
• Context: same value needed by MANY distant components; identity-style data (theme/user/locale) changing rarely. Litmus tests:

1. Would drilling pass through ≥3 unrelated layers? → consider context.
2. Does the value change on every keystroke? → probably belongs local or in an external store instead. Overusing context for everything recreates hidden global coupling - the problem libraries like Redux were born from.

---

• Every consumer re-renders whenever the Provider's value changes - reference changes matter, not deep content.
• Typical footgun: value={{user, setUser}} inline object → new identity every render of provider parent → ALL consumers re-render constantly. Mitigations:

1. useMemo the provided object.
2. Split contexts by change frequency (stable auth vs hot filters).
3. Push state down to the smallest common subtree.
4. For high-frequency shared state, graduate to external stores with selector subscriptions.

---

• Separate READ context from UPDATE (dispatch) context:

<UserCtx.Provider value={state}>
 <UserDispatchCtx.Provider value={dispatch}>...

Components needing only actions subscribe to a stable dispatch and skip re-renders caused by state changes.

• Also split by domain (ThemeCtx/AuthCtx) rather than one mega-context - narrower blast radius per change. Interview phrasing: "context granularity is render-performance engineering."

---