5 questions foundWhat problem does the Context API solve in React?
Beginner Context lets you share a value, such as the current logged in user or a color theme, with many components at once, without needing to manually pass it down as a prop through every single component in between.
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
const theme = useContext(ThemeContext);
return <div className={theme}>Toolbar</div>;
}
Real-world example A large app shares the current signed in user's information with many different components scattered across the page, without having to pass that user object through every single component in between.
Common follow-ups: What happens to a component that uses useContext if there is no matching Provider above it?;How is Context different from a global JavaScript variable?
Custom Hooks;Props & State
How do you create and use a custom Context in React step by step?
Intermediate First you create the context using createContext, then you wrap the part of your app that needs access with a Provider component and give it a value, and finally any component inside that Provider can read the value using the useContext hook.
const UserContext = React.createContext(null);
function App() {
const [user, setUser] = useState({ name: 'Alice' });
return (
<UserContext.Provider value={user}>
<Profile />
</UserContext.Provider>
);
}
function Profile() {
const user = useContext(UserContext);
return <p>Hello, {user.name}</p>;
}
Real-world example A shopping app creates a UserContext once, wraps its entire app in a Provider holding the logged in customer's details, and lets any component, like the header or the checkout page, read that same data easily.
Common follow-ups: Can you have more than one Context Provider active at the same time?;What is a good default value to give createContext when no Provider exists yet?
State Management;Custom Hooks
Why can overusing Context sometimes hurt performance in a large React app?
Advanced Every component that reads a piece of Context using useContext will re render whenever that Context's value changes, even if the component only cares about a small part of that value. Putting too much unrelated data into a single large Context can cause many components to re render more often than necessary.
// Splitting one large context into smaller, focused contexts
const UserContext = React.createContext(null);
const ThemeContext = React.createContext('light');
// Now a component that only needs the theme is not affected by user updates
Real-world example A team notices their whole app slows down every time a single small setting changes, and fixes it by splitting one giant AppContext into several smaller, focused contexts so unrelated components stop re rendering unnecessarily.
Common follow-ups: How would you combine Context with useMemo to reduce unnecessary re renders?;When is a dedicated state management library a better choice than Context for performance reasons?
Performance (memo/useMemo);State Management Libraries (Redux Zustand & Recoil)
How would you build a custom hook to make using a specific Context simpler and safer?
Intermediate You can write a small custom hook that calls useContext internally and throws a clear, helpful error if it is used outside its matching Provider. This saves other developers from having to import both useContext and the context itself every time, and catches mistakes early with a clear message.
function useUser() {
const context = useContext(UserContext);
if (context === undefined) {
throw new Error('useUser must be used inside a UserProvider');
}
return context;
}
// Usage elsewhere in the app
const user = useUser();
Real-world example A team creates a useAuth custom hook around their authentication context, so any developer who accidentally forgets to wrap a component in the AuthProvider immediately gets a clear, helpful error message instead of a confusing crash.
Common follow-ups: Why is throwing a clear error better than just returning null or undefined silently?;What other benefits does wrapping context access in a custom hook provide?
Custom Hooks;Design Patterns in React
What is a common real world use case for the Context API besides sharing a theme?
Beginner Context is commonly used for information that many parts of an app need at once, such as the currently logged in user, the selected language for translations, or shopping cart contents in an online store, avoiding the need to pass this shared data through many layers of components manually.
const LanguageContext = React.createContext('english');
function App() {
const [language, setLanguage] = useState('english');
return (
<LanguageContext.Provider value={language}>
<Header />
<MainContent />
</LanguageContext.Provider>
);
}
Real-world example A travel booking site lets a user change their preferred language once at the top of the app, and every page, from the search bar to the footer, instantly displays text in that chosen language using shared context.
Common follow-ups: How would you let a user actually change the context value, not just read it?;Is Context a good replacement for every use case of a dedicated state management library?
Internationalization (i18n) in React;State Management