01 / Foundation
Understand the concept
The Context API allows values such as themes, authentication, or user preferences to be shared across multiple components.
It helps avoid prop drilling but should not replace all state management. Context is best for data that many components consume.
02 / Implementation
Using Context
theme-context.tsx
import { createContext, useContext } from "react";
const ThemeContext = createContext("light");
function Button() {
const theme = useContext(ThemeContext);
return <button>{theme}</button>;
}
export default function App() {
return (
<ThemeContext.Provider value="dark">
<Button />
</ThemeContext.Provider>
);
}04 / Interview