What Are React Portals and When Do You Use Them?
Learn what React portals are, how createPortal works, and why they are used for modals, tooltips, and dropdowns.
Expected Interview Answer
A React portal lets a component render its children into a DOM node that lives outside the parent component tree in the actual document, while the component still stays inside the normal React tree for state, context, and event bubbling purposes.
Created with ReactDOM.createPortal(children, domNode), a portal is used whenever a UI element needs to visually escape a parent container with overflow:hidden, a fixed z-index stack, or clipped positioning — the classic cases being modals, tooltips, dropdown menus, and toast notifications. Even though the rendered DOM node sits elsewhere in the document (often a sibling of the app root, like #modal-root), the component instance remains a child in the React element tree, so it still receives context from ancestor providers, participates in the parent’s state updates, and its synthetic events still bubble up through the React tree, not the DOM tree. This separation of "DOM location" from "React tree location" is the entire point: it solves CSS-stacking-context problems without breaking the logical component hierarchy or requiring prop drilling through an unrelated DOM ancestor. The main things to get right are creating and cleaning up the target DOM node, and remembering that native DOM event listeners attached outside React will not see portal-bubbled synthetic events in the same way.
- Escapes parent overflow/z-index/clipping without leaving the React component tree
- Context and state from ancestors still flow normally into the portal content
- Synthetic events bubble through the React tree, simplifying event handling for modals
- Keeps modal/tooltip logic co-located with the component that owns it, avoiding prop drilling
AI Mentor Explanation
A React portal is like a commentator who sits in a separate broadcast booth outside the stadium seating bowl, physically detached from the players, yet is still fully wired into the team’s official communication channel and match data feed. The booth’s location is chosen purely to avoid obstruction, not because the commentator stopped being part of the broadcast crew. Every instruction, score update, and cue still reaches them exactly as it would if they were pitchside. That is the split React portals create: different physical placement, same logical membership in the team.
Step-by-Step Explanation
Step 1
Create a target DOM node
Add a dedicated element (e.g. #modal-root) outside the main app root, typically in the HTML shell.
Step 2
Call createPortal in render
Return ReactDOM.createPortal(children, targetNode) from the component instead of the normal JSX subtree.
Step 3
React tree stays intact
The component remains a child in the React element tree, so context, props, and state updates flow normally.
Step 4
Events bubble through React, not DOM
Clicks inside the portal still bubble to React ancestor handlers, even though the DOM node is elsewhere.
What Interviewer Expects
- Clear distinction between the React tree and the DOM tree
- Concrete use cases: modals, tooltips, dropdowns, toasts
- Understanding that context and synthetic event bubbling still work through the React tree
- Awareness of accessibility concerns (focus trapping, ARIA) when building portal-based modals
Common Mistakes
- Believing a portal breaks context or state flow because the DOM location changed
- Forgetting to clean up or unmount the portal target node, causing memory leaks
- Assuming native (non-React) DOM listeners will see portal-rendered events the same way
- Not handling focus management/accessibility for modal portals
Best Answer (HR Friendly)
“A React portal lets you visually place something like a modal or tooltip outside its normal container in the page — so a small card in a table cell can pop up a full-screen dialog that is not clipped by that cell's boundaries — while the component still behaves as if it lived in its original place in the app for state and events.”
Code Example
import { createPortal } from 'react-dom'
function Modal({ children, onClose }) {
const modalRoot = document.getElementById('modal-root')
return createPortal(
<div className="modal-overlay" onClick={onClose}>
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
{children}
</div>
</div>,
modalRoot
)
}
function App() {
const [open, setOpen] = React.useState(false)
return (
<div style={{ overflow: 'hidden' }}>
<button onClick={() => setOpen(true)}>Open</button>
{open && <Modal onClose={() => setOpen(false)}>Hello from a portal</Modal>}
</div>
)
}Follow-up Questions
- How do synthetic events bubble differently from native DOM events with portals?
- How would you trap focus inside a portal-rendered modal for accessibility?
- What server-side rendering considerations exist for portals?
- How would you build a reusable tooltip component using a portal?
MCQ Practice
1. What does ReactDOM.createPortal primarily change about a rendered element?
A portal changes only where the DOM node is placed; the React tree membership is unchanged.
2. Why are portals commonly used for modals?
Modals need to render outside clipped/positioned ancestors visually, but still need the app's context and state.
3. How do click events inside a portal typically propagate?
React synthetic events bubble according to the React element tree, not the DOM node's physical position.
Flash Cards
What does a React portal change? — Where a component renders in the DOM, not its place in the React tree.
Typical portal use cases? — Modals, tooltips, dropdowns, toast notifications.
How is createPortal called? — ReactDOM.createPortal(children, domNode)
Do portal events bubble to React ancestors? — Yes — synthetic events bubble through the React tree, not the DOM position.