What are React Portals?

React

The short answer

A React Portal lets you render a component's children into a different part of the DOM, outside its parent component's DOM hierarchy. The component still behaves as part of the React tree (events bubble up, context works), but its HTML output appears somewhere else in the page. This is useful for modals, tooltips, and dropdowns that need to visually break out of their parent container.

The problem Portals solve

Imagine you have a modal inside a card component:

function Card() {
  const [showModal, setShowModal] = useState(false);
  return (
    <div
      style={{ overflow: 'hidden', position: 'relative' }}
    >
      <button onClick={() => setShowModal(true)}>
        Open Modal
      </button>
      {showModal && (
        <Modal onClose={() => setShowModal(false)} />
      )}
    </div>
  );
}

The modal is inside a div with overflow: hidden. This means the modal gets clipped — it cannot extend beyond its parent's boundaries. Even with position: fixed, z-index issues and stacking contexts from parent elements can cause problems.

How Portals work

Instead of rendering the modal inside the card's DOM, you render it directly into document.body (or any other DOM node):

import { createPortal } from 'react-dom';
function Modal({ children, onClose }) {
  return createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div
        className="modal-content"
        onClick={(e) => e.stopPropagation()}
      >
        {children}
      </div>
    </div>,
    document.body
  );
}

The modal's HTML appears at the end of <body>, completely outside the card's DOM. No overflow: hidden or z-index issues.

Event bubbling still works

Even though the modal is rendered in a different DOM location, React events still bubble up through the React component tree, not the DOM tree:

function Parent() {
  const handleClick = () => console.log('Parent caught it');
  return (
    <div onClick={handleClick}>
      <Modal>
        <button>Click me</button>
      </Modal>
    </div>
  );
}

Clicking the button inside the modal will trigger handleClick on Parent, because in the React tree, the modal is still a child of Parent. This is one of the key benefits — Portals maintain React's event system even though the DOM structure is different.

Common use cases

  • Modals and dialogs — need to render above everything else
  • Tooltips and popovers — need to escape overflow containers
  • Dropdown menus — need to avoid clipping by parent elements
  • Toast notifications — rendered at the root level

Interview Tip

When explaining Portals, focus on two things: the problem they solve (CSS issues like overflow and z-index) and the fact that React events still work through the component tree. The event bubbling point is what separates a surface-level answer from a deep one.

Why interviewers ask this

This question tests if you have dealt with real UI challenges like modals and dropdowns. Interviewers want to see if you know when the normal rendering approach breaks down and how Portals solve it. Understanding that event bubbling works through the React tree (not the DOM tree) shows a deeper understanding of how React works.

Table of Contents