Context passes data through the tree without manual props at every level. Interviewers probe when it is appropriate and how to optimize re-renders.
Common Interview Questions
Q: When should you use Context?
Answer: Stable, moderately shared data: theme, locale, auth session, feature flags. Not for every piece of state — local state and composition often suffice.
Q: Why do all consumers re-render?
Answer: When Provider value identity changes, every consumer re-renders. Memoize value objects and split contexts by update frequency.
const value = useMemo(
() => ({ user, logout }),
[user]
);
return (
<AuthContext.Provider value={value}>{children}</AuthContext.Provider>
);
Q: Context vs Redux?
Answer: Context is built-in dependency injection, not a full state manager. No middleware, devtools, or selective subscription by default. Redux/Zustand for complex global state.
Q: Custom hook pattern?
Answer: Encapsulate context access with validation and a clean API. Throw if used outside provider to fail fast.
function useAuth() {
const ctx = useContext(AuthContext);
if (!ctx) throw new Error("useAuth must be inside AuthProvider");
return ctx;
}
Key Points for Interviews
-
Avoid putting fast-changing values in broad Context
-
Split contexts: ThemeContext vs UserContext
-
Memoize provider values
-
Not a performance silver bullet
-
Great for dependency injection and theming