A portal renders children into a different place in the DOM (outside the parent's DOM hierarchy), while keeping them in React's component tree — so context, props, and events still work as if they were nested normally.
{ createPortal } ;
() {
(
,
.()
);
}
Modals, tooltips, dropdowns, and toasts must escape an ancestor's overflow: hidden or z-index stacking context. If the modal were nested deep inside a card with overflow: hidden, it would get clipped. Rendering it to body via a portal avoids that entirely.
This is the subtle, powerful part: even though the modal's DOM lives under body, an onClick on a React ancestor still fires, because event bubbling follows the React tree, not the DOM tree:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
A portal solves positioning, not a11y. For dialogs you still need focus trapping, role="dialog"/aria-modal, and Escape-to-close (or use the native <dialog> element which handles much of this).