Um portal renderiza elementos filhos em um lugar diferente no DOM (fora da hierarquia DOM do pai), enquanto os mantém na árvore de componentes React — então context, props e eventos ainda funcionam como se estivessem aninhados normalmente.
{ createPortal } ;
() {
(
,
.()
);
}
Modais, tooltips, dropdowns e toasts precisam escapar de um ancestor com overflow: hidden ou de um contexto de empilhamento z-index. Se o modal estivesse aninhado profundamente dentro de um card com overflow: hidden, ele seria cortado. Renderizá-lo para body através de um portal evita isso completamente.
Esta é a parte sutil e poderosa: mesmo que o DOM do modal viva sob body, um onClick em um ancestor React ainda dispara, porque o bubbling de eventos segue a árvore React, não a árvore DOM:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Um portal resolve posicionamento, não a11y. Para diálogos você ainda precisa de focus trapping, role="dialog"/aria-modal e Escape-para-fechar (ou use o elemento nativo <dialog> que lida com muito disso).