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.
What are React portals and when would you use them?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
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