Beginner LevelReact JS & React 19
How does the Context API (createContext, useContext) eliminate prop drilling?
❓ Interview Prompt: Explain Context API, `createContext`, `Context.Provider`, `useContext`, prop drilling, and global UI state management.
The Context API allows components to share data down the component tree without explicitly passing props through every intermediate level (Prop Drilling).
3 Steps to Context:
1
Create Context: 'const ThemeContext = createContext('light');'
2
Provide Context: Wrap top-level parent in '<ThemeContext.Provider value={theme}>'.
3
Consume Context: In deep child components, read value via 'const theme = useContext(ThemeContext);'.
Code Implementation Example
jsx
const ThemeContext = createContext('light');
function App() {
const [theme, setTheme] = useState('dark');
return (
<ThemeContext.Provider value={theme}>
<Navigation />
</ThemeContext.Provider>
);
}
function Navigation() {
const theme = useContext(ThemeContext); // Reads 'dark' without prop drilling!
return <nav className={theme}>Nav Bar</nav>;
}💡Sharing theme state down component trees using Context API.
🎯 Interview Key Takeaway
Use Context API to share global configuration (themes, auth state) without prop drilling.
#Context API#useContext#Prop Drilling#Beginner
Back to all React JS & React 19 Questions→