Lesson 19 of 80

Portals

Q: What is a portal, and how would you use one to build a modal that isn't clipped by an ancestor's overflow:hidden?

A strong answer covers: createPortal renders a component's DOM output into a different DOM node than its parent, while keeping it in the same logical position in the React tree; This escapes CSS constraints like overflow:hidden or a constrained stacking context on an ancestor; Props, context, and event bubbling still work through the React tree as normal — only DOM placement changes.

Render a component's output into a completely different DOM node than its parent — the tree stays logical in React, but the pixels land somewhere else entirely.

10 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

Question 1 of 2

A modal is rendered via createPortal into a DOM node outside the app root. A click inside it needs to trigger an onClick handler on a logical parent defined in JSX. Does that still work?

Only if the handler is explicitly passed a ref to the portal's target nodeYes — React event bubbling follows the React tree, not the DOM treeNo — since the DOM node is outside the ancestor, the event can't reach its handler

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on Portals

What interviewers actually ask about this, and what a strong answer has to cover.

What is a portal, and how would you use one to build a modal that isn't clipped by an ancestor's overflow:hidden?

A strong answer covers

createPortal renders a component's DOM output into a different DOM node than its parent, while keeping it in the same logical position in the React tree
This escapes CSS constraints like overflow:hidden or a constrained stacking context on an ancestor
Props, context, and event bubbling still work through the React tree as normal — only DOM placement changes

Likely follow-ups

Does an event fired inside a portal bubble through the DOM tree or the React tree?
What has to already exist in the HTML for a portal's target to work?
Besides modals, what's another real use case for a portal?

Practice these with the AI interviewer →

The plain-language idea

Normally a component's rendered output is inserted into the DOM exactly where its parent put it. createPortal breaks that: the component still lives in the React tree wherever you wrote it (props, context, event bubbling all work normally), but its actual DOM output is inserted wherever you point it.

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">{children}</div>,
    document.getElementById("modal-root")   // a div outside the normal app root
  );
}

Modal might be rendered deep inside a component with overflow: hidden or a constrained z-index stacking context — without a portal, the modal would be visually clipped or trapped behind other content. The portal lets its DOM node sit at the top level, free of the parent's CSS constraints, while Modal itself stays a normal, logical child in React's tree.

Portals: logical tree here, DOM node elsewhereStep 1 of 3

createPortal(<Modal />, document.getElementById('modal-root')) — render this subtree into a different DOM node.

What people usually miss

Watch out

Portals don't break React's data flow. Context, props, and state all work exactly as if the portal weren't there — only the DOM placement changes, nothing about the component model does.
The real use case is always "CSS can't reach where I need to render." Modals, tooltips, dropdowns that need to escape a parent's overflow: hidden or stacking context are the textbook cases — not a general-purpose tool for arbitrary layout.
The target DOM node must already exist when createPortal runs — a common setup is a static <div id="modal-root"> sitting next to the app's root <div id="root"> in index.html.

Why this matters in interviews

"How would you build a modal that isn't clipped by a parent's overflow:hidden?" is a very concrete, common scenario, and portals are the textbook-correct React answer — recognizing this as a DOM-placement problem (not a CSS-only problem) is the actual signal.