What are React Portals?
Understand React Portals and createPortal: render modals and tooltips outside the parent DOM while keeping React state, context, and event bubbling intact.
Expected Interview Answer
React Portals let you render a child component into a DOM node that lives outside the parent component's DOM hierarchy, while keeping it in React's component tree for state, context, and events.
You create one with ReactDOM.createPortal(child, container), where container is any DOM node such as a div appended to document.body. Even though the markup renders elsewhere in the DOM, the portal stays a child in the React tree, so context and state flow normally and events bubble up through the React tree — not the DOM tree. This is ideal for modals, tooltips, and dropdowns that must escape parent overflow, z-index, or clipping constraints.
- Escape parent CSS constraints like overflow: hidden and z-index
- Render modals and tooltips at the top of the DOM
- Keep React context and state working across the portal
- Events still bubble through the React tree, not the DOM tree
- Cleaner layering without restructuring the component tree
AI Mentor Explanation
A portal is like a boundary rope camera feeding the giant stadium screen: the shot is captured down at ground level but displayed high above everyone, outside the players' area. The action still belongs to the match, yet it appears somewhere unclipped by the field. A modal renders through a portal the same way — logically part of your component, visually placed above everything else.
Step-by-Step Explanation
Step 1
Create a container node
Add a target DOM element, e.g. <div id="modal-root"></div> in index.html, or create one and append it to document.body.
Step 2
Call createPortal
Return ReactDOM.createPortal(children, container) from your component's render instead of returning JSX directly.
Step 3
Render normal JSX as children
The children are written like any JSX; they receive props, state, and context exactly as if rendered inline.
Step 4
Rely on React event bubbling
Events bubble through the React tree, so an onClick on a parent still catches clicks from portal content.
Step 5
Clean up dynamic containers
If you created the container in an effect, remove it from the DOM on unmount to avoid orphaned nodes.
What Interviewer Expects
- Knowing createPortal's signature: child and container
- Understanding it escapes parent DOM but not the React tree
- Explaining event bubbling through the React tree
- Common use cases: modals, tooltips, dropdowns
- Why portals solve overflow and z-index clipping
Common Mistakes
- Thinking a portal detaches the component from React state or context
- Assuming events bubble through the DOM tree instead of the React tree
- Forgetting to create or reference the target container node
- Not cleaning up a dynamically created container on unmount
- Using a portal when simple CSS positioning would suffice
Best Answer (HR Friendly)
“A React Portal lets a piece of the interface appear somewhere else on the page — like a pop-up shown on top of everything — while it still behaves as part of the same component. It's the standard tool for building modals and tooltips that shouldn't be trapped inside their container.”
Code Example
import { createPortal } from 'react-dom';
function Modal({ isOpen, onClose, children }) {
if (!isOpen) return null;
return createPortal(
<div className="overlay" onClick={onClose}>
<div className="dialog" onClick={(e) => e.stopPropagation()}>
{children}
<button onClick={onClose}>Close</button>
</div>
</div>,
document.getElementById('modal-root')
);
}
// index.html contains: <div id="modal-root"></div>
function App() {
const [open, setOpen] = React.useState(false);
return (
<div style={{ overflow: 'hidden' }}>
<button onClick={() => setOpen(true)}>Open</button>
<Modal isOpen={open} onClose={() => setOpen(false)}>
<p>I render outside the clipped parent.</p>
</Modal>
</div>
);
}Follow-up Questions
- How do events bubble from a portal compared to the DOM structure?
- Why are portals useful for modals with overflow: hidden parents?
- Does React context still work inside a portal?
- How would you handle focus trapping in a portal-based modal?
- Where should the portal container node live in the DOM?
MCQ Practice
1. What is the correct signature of a React portal?
ReactDOM.createPortal takes the child (what to render) first and the container DOM node second.
2. Through which tree do events from portal content bubble?
Even though the DOM node lives elsewhere, events bubble through the React component tree, so React parents still receive them.
3. Which problem do portals commonly solve?
Portals render outside the parent's DOM, escaping overflow: hidden and z-index stacking issues that clip modals and tooltips.
Flash Cards
What does createPortal do? — Renders children into a DOM node outside the parent, while keeping them in the React tree.
What is createPortal's signature? — createPortal(child, container).
Do events bubble via the DOM or React tree? — Through the React component tree, not the DOM tree.
Name a common use case. — Modals, tooltips, and dropdowns that must escape parent clipping.
Does context still work in a portal? — Yes — the portal remains part of the React tree, so context and state flow normally.