Context API Patterns in React 19
Basic Pattern
javascript
import { createContext, use, useState } from 'react';
const UserContext = createContext(null);
export function UserProvider({ children }) {
const [user, setUser] = useState(null);
return (
<UserContext value={{ user, setUser }}>
{children}
</UserContext>
);
}
export function useUser() {
const context = use(UserContext);
if (!context) {
throw new Error('useUser must be used within UserProvider');
}
return context;
}
React 19: Conditional Context Access
use() allows context access inside conditionals (unlike useContext):
javascript
function Component({ isPremium }) {
let theme;
if (isPremium) {
theme = use(ThemeContext);
}
return <div className={theme}>Content</div>;
}
Splitting Contexts
Avoid unnecessary re-renders by splitting contexts:
javascript
const UserContext = createContext(null);
const ThemeContext = createContext('light');
function App() {
const [user, setUser] = useState(null);
const [theme, setTheme] = useState('light');
return (
<UserContext value={{ user, setUser }}>
<ThemeContext value={{ theme, setTheme }}>
<Layout />
</ThemeContext>
</UserContext>
);
}
Now theme changes don't re-render components only using UserContext.
For comprehensive Context patterns, see: research/react-19-comprehensive.md lines 288-303, 1326-1342, 1644-1670.