Een portal rendert children naar een ander plek in de DOM (buiten de DOM-hiërarchie van de parent), terwijl ze in React's component tree blijven — dus context, props en events werken nog steeds alsof ze normaal genest waren.
{ createPortal } ;
() {
(
,
.()
);
}
Modals, tooltips, dropdowns en toasts moeten ontsnappen aan een ancestor's overflow: hidden of z-index stacking context. Als de modal diep genest zou zijn in een card met overflow: hidden, zou deze worden afgekapt. Het renderen naar body via een portal vermijdt dit volledig.
Dit is het subtiele, krachtige gedeelte: hoewel de modal's DOM onder body leeft, zou een onClick op een React ancestor nog steeds afvuren, omdat event bubbling de React tree volgt, niet de DOM tree:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Een portal lost positionering op, niet a11y. Voor dialogs heb je nog steeds focus trapping, role="dialog"/aria-modal en Escape-to-close nodig (of gebruik het native <dialog> element dat veel hiervan afhandelt).