QReact · Interview preparation
When should you use a React portal?
Portals render a component's DOM at another document location while preserving its React parent relationship.
The idea to remember.
Portals render a component's DOM at another document location while preserving its React parent relationship. They are helpful for dialogs and overlays, but keyboard focus and accessibility still need deliberate handling.
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 you use a React portal 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 ↗