React · Theory

Portals in React

Theory

41/94

Portals in React

createPortal(jsx, domNode) renders children into a DOM node outside the parent — typically document.getElementById('modal-root'). Modals, toasts, tooltips escape overflow:hidden and z-index wars. In the React tree, the modal still sits under the opener for context and events.

You still need to stop background scroll and handle focus trap for a real modal. Portal only solves where the DOM node lives.

Portals in React — modal markup still has React parents, but the div sits under #modal-root — escapes overflow:hidden.

Exam tip

Why modals use portals + event bubbling note.

Example

// Portal
import { createPortal } from "react-dom";

export default function Modal({ open, children }) {
  if (!open) return null;
  return createPortal(
    <div className="modal">{children}</div>,
    document.getElementById("modal-root")
  );
}

Portals in React — modal markup still has React parents, but the div sits under #modal-root — escapes overflow:hidden.

Short notes

DefRender into another DOM node.
Usemodal / tooltip.
NoteReact tree (events/context) still parents.

// Portal import { createPortal } from "react-dom"; export default function Modal({ open, children }) { if (!open) return null; return createPortal( <div className="modal">{children}</div>, document.getElementById("modal-root") ); }

Portals in React

Example

Short notes

Questions

Portals in React

Example

Short notes

Questions