Every consumer re-renders when the provider value changes by reference, no matter which part of the value it reads, because context has no selector. A provider holding a big object built fresh on each render will therefore re-render every consumer constantly. Fix it by memoizing the value, splitting state and dispatch into separate contexts, or holding the data in an external store consumers subscribe to with selectors.
Why interviewers ask this
Context is the most misused API in React, so the interviewer wants to know whether you have felt the pain. They are listening for the fact that there is no partial subscription, and for practical mitigations rather than a blanket rule against context. Mentioning useSyncExternalStore or a small store library shows you know the point at which context stops being the right tool.
How to structure your answer
- State the rule: any value change re-renders all consumers.
- Explain why, there is no selector and comparison is by reference.
- List the fixes in order: memoize, split, then move to a store.
- Say what context is genuinely good at, such as stable config.
Example answer
Context is a dependency injection mechanism first and a state manager a distant second. The performance issue is that consumers subscribe to the whole value, so when the provider's value changes identity, every consumer under it renders, even one that only reads a single boolean. The first thing I check is whether the provider is building a new object inline in JSX, because that is a new reference on every parent render and it defeats everything. After that I split contexts, because usually the data changes often and the setters never change at all, so putting dispatch in its own context stops most of the churn. If I still need selectors, I stop pretending context is a store and put the state in a real one, then subscribe with useSyncExternalStore or a library so each component picks its slice. Where context stays excellent is stable things: theme, current user, a locale, a client instance. Those change roughly never, so the re-render cost is irrelevant.
Walking into this interview soon? GhostPilot listens to your live call, spots the question the moment it is asked, and puts a structured answer on your screen in real time. Try it on your next mock, or grab a $29 Session Pass, no subscription, for the real thing.
See how it worksFollow-up questions to expect
- How does useSyncExternalStore avoid the re-render problem?
- What happens with nested providers of the same context?
- Would you use context for form state? Why not?
Related react developer questions
Your interviewer will ask their own version of this. Paste your actual job description into the free Question Predictor and get the 20 questions that role is most likely to ask, with what each one is really probing.
Predict my questions