Intermediate LevelReact JS & React 19
How does the use() hook in React 19 replace useContext for conditional Context consumption?
❓ Interview Prompt: Compare `useContext` (top-level unconditional calls) vs React 19 `use(Context)` (conditional and block callability).
Before React 19, reading Context required calling 'useContext(Context)', which suffered from the Rules of Hooks restriction: it could NOT be called inside 'if' statements or loops.
React 19 'use(Context)':
React 19 allows passing a Context object to 'use(Context)':
•
Can be called conditionally inside 'if' blocks and loops, allowing components to skip subscribing to Context when data is unneeded!
Code Implementation Example
jsx
import { use } from 'react';
import { ThemeContext } from './ThemeContext';
function ConditionalWidget({ showTheme }) {
if (showTheme) {
const theme = use(ThemeContext);
return <div className={theme}>Active Theme</div>;
}
return <div>Default Widget</div>;
}💡Conditionally consuming ThemeContext using React 19 use(Context) API.
🎯 Interview Key Takeaway
React 19's use(Context) API replaces useContext and can be called conditionally inside if statements.
#React 19#use()#Context API#Intermediate
Back to all React JS & React 19 Questions→