Fundamentalsintermediate
Portals
Learn how React Portals let you render children into a DOM node outside the parent component's hierarchy.
A Portal, created with ReactDOM.createPortal(children, domNode), renders its children into a different part of the actual DOM tree than where the component sits logically in the React tree. The React component tree (for context, event bubbling, and lifecycle purposes) stays exactly the same — only the physical DOM placement changes.
A Portal is like a pneumatic tube system in an office: you drop your document into a tube at your desk (logical component position), but it physically pops out at the mailroom pigeon hole (a different point in the actual DOM), even though it's still 'from your desk' for tracking purposes.
Key Concepts
1
This is the standard solution for UI that must visually escape a parent's CSS constraints, most commonly modals, tooltips, and dropdown menus that need to render above everything else without being clipped by an ancestor's overflow: hidden or trapped by a z-index stacking context.
overflow: hiddenz-index
2
Despite rendering elsewhere in the DOM, events dispatched from within a portal still bubble up through the React component tree as if the portal were in its original logical location, not its physical DOM location. This means a portal's onClick handler will still trigger parent handlers higher up the React tree, which is a frequent surprise for developers coming from vanilla DOM thinking.
onClick
3
Interviewers ask about Portals to see if a candidate understands the distinction between the React tree (used for context, events, and lifecycle) and the DOM tree (physical layout), since Portals are the clearest example of those two trees diverging.
React treeDOM tree