Escaping the DOM hierarchy
Sometimes a component must render its output outside its parent DOM node, for example a modal that should sit at the document body to avoid being clipped by an ancestor with overflow hidden.
A portal does exactly this. The createPortal function renders children into any DOM node you choose, while the component still lives in the React tree at its original position.
The key insight
A portal changes only where the DOM nodes land, not where the component sits logically.
- Context still flows from the React parent, not the DOM parent.
- Events still bubble through the React tree, so a click inside a portaled modal can reach a handler on its React ancestor even though the DOM is elsewhere.
- This makes portals ideal for modals, tooltips, and dropdowns that must break out of overflow or stacking contexts.
Portals let presentation escape the DOM box while logic stays where it belongs.
Key idea
A portal renders children into another DOM node, yet context and events still follow the React tree, not the DOM hierarchy.