React Context
Context lets you pass data through the component tree without prop drilling.
How it works
tsx
const ThemeContext = createContext('light');
function App() {
return (
// React 19: the context itself is the provider (<ThemeContext.Provider> still works)
<ThemeContext value="dark">
<Child />
</ThemeContext>
);
}
function Child() {
const theme = useContext(ThemeContext);
return <div>{theme}</div>;
}Performance problem
Every context consumer re-renders on any change to value - even if it only uses part of the data.
Solutions
- Split contexts - a separate one for frequently changing data.
- Memoize
valuewithuseMemo. - Use a state manager (Zustand, Jotai) for high-frequency updates.
Context works great for rarely changing data: theme, locale, authentication.
updated
did you know it?