Portals render children into a DOM node outside the parent hierarchy, useful for modals, tooltips, and overlays while preserving React event bubbling. Portals help overlays but require focus management and accessibility checks; test event bubbling and scroll lock.
Interview answer drill
Use this React interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.
What are React portals and when would you use them?Frontend interview answer
Interview focus
This React interview question tests whether you can explain React portals and when should you use them, connect it to production trade-offs, and handle common follow-up questions.
- React portals and when should you use them explanation without falling back to memorized docs wording
- Portals and Modals reasoning, edge cases, and production failure modes
- How you would answer the most likely React interview follow-up
Interview quick answer
Full interview answer
Overview
By default, components in React render into a specific section of the DOM tree — typically inside a root element. However, there are cases where you need to render an element outside of this hierarchy (like a modal that overlays the entire page). React Portals make this possible while preserving the component’s state and event bubbling behavior.
JSX
// Example: Creating a Portal
import { createPortal } from 'react-dom';
function Modal({ children }) {
const modalRoot = document.getElementById('modal-root');
return createPortal(
<div className='modal-overlay'>
<div className='modal-content'>{children}</div>
</div>,
modalRoot
);
}
// Usage
function App() {
return (
<>
<h1>Main App</h1>
<Modal>
<p>This modal is rendered outside the main DOM hierarchy!</p>
</Modal>
</>
);
}
Feature | Description |
|---|---|
DOM Separation | Renders children into a different part of the DOM while still being part of the same React component tree. |
Event Propagation | Events (like clicks) still bubble up through the React tree even if rendered elsewhere. |
Reusability | Useful for rendering overlays, tooltips, dropdowns, and notifications without CSS positioning issues. |
When to Use React Portals
- Modals and Dialogs: To overlay content on top of the entire app while avoiding nested CSS stacking contexts.
- Tooltips and Popovers: To position elements outside of overflow or clipping containers.
- Floating UI Elements: For global notifications, menus, or context-sensitive actions.
HTML
<!-- Typical setup in index.html -->
<body>
<div id='root'></div>
<div id='modal-root'></div>
</body>
How It Works Internally
React’s createPortal() function takes two arguments: a React child (JSX element) and a DOM node. It attaches the child to the specified DOM node, but keeps it part of the React component hierarchy — meaning it still shares state, context, and event propagation with its parent.
Advantages of Using Portals
- Solves z-index and overflow issues by detaching UI from parent containers.
- Keeps React’s declarative structure intact.
- Maintains event propagation and context links even when rendered outside the normal DOM flow.
Portals act like ‘wormholes’ in React — they render elements somewhere else in the DOM while keeping them connected to their original logic and context.
Practical scenario
A modal and tooltip must render above the app shell, so you render them into a portal root outside the main DOM tree.
Common pitfalls
- Missing focus management and keyboard trapping.
- Assuming event bubbling changes (it still bubbles through React tree).
- Forgetting to lock background scroll.
Portals solve layering but add accessibility work. Test with keyboard navigation and focus return.
Summary
- React Portals render children outside the parent DOM hierarchy.
- They preserve React context and event bubbling despite DOM separation.
<li>Used for modals, overlays, and tooltips to avoid CSS stacking issues.Similar questions
Guides
Preparing for interviews?
Use this as one explanation rep, then continue with the React interview questions cluster or a guided prep path.