QReact · Interview preparation
When should React context be used?
Use context for values many descendants need, such as a theme or authenticated-user summary.
The idea to remember.
Use context for values many descendants need, such as a theme or authenticated-user summary. Avoid putting rapidly changing unrelated state in one giant context without measuring its effect.
01Learn by doing
From first example to real project.
Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.
Basic: pass content through children
01 / BEGINNERCompose a reusable panel without hardcoding its content.
function Panel({ title, children }) {
return <section><h2>{title}</h2>{children}</section>;
}Intermediate: share state with context
02 / INTERMEDIATEPut truly shared values in context, not every temporary input.
const ThemeContext = React.createContext('light');
function ThemeLabel() {
const theme = React.useContext(ThemeContext);
return <span>Theme: {theme}</span>;
}Real scenario: reducer for complex UI
03 / REAL SCENARIOGroup related updates in a reducer for a multi-step workflow.
function reducer(state, action) {
if (action.type === 'NEXT') return { ...state, step: state.step + 1 };
if (action.type === 'BACK') return { ...state, step: Math.max(0, state.step - 1) };
return state;
}
const [wizard, dispatch] = React.useReducer(reducer, { step: 0 });02Check your understanding
Try it in your own words.
Explain when should React context be used without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.
Keep learning here.
Explore more in-depth guides, exercises and related interview questions in this library.
Browse React study guides ↗