Un portal renderiza los hijos en un lugar distinto del DOM (fuera de la jerarquía DOM del padre), pero los mantiene dentro del árbol de componentes de React — de modo que el contexto, las props y los eventos siguen funcionando como si estuvieran anidados normalmente.
{ createPortal } ;
() {
(
,
.()
);
}
Los modales, tooltips, menús desplegables y notificaciones (toasts) deben escapar del overflow: hidden o del contexto de apilamiento z-index de un ancestro. Si el modal estuviera anidado en lo profundo de una tarjeta con overflow: hidden, quedaría recortado. Renderizarlo en body mediante un portal evita eso por completo.
Esta es la parte sutil y poderosa: aunque el DOM del modal vive bajo body, un onClick en un ancestro de React aún se dispara, porque la propagación de eventos sigue el árbol de React, no el árbol del DOM:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Un portal resuelve el posicionamiento, no la accesibilidad. Para los diálogos aún necesitas atrapar el foco (focus trapping), role="dialog"/aria-modal y cierre con Escape (o usa el elemento nativo <dialog>, que se encarga de buena parte de esto).
Los portales permiten que el contenido superpuesto se posicione libremente respecto a todo el documento mientras se conserva la composición natural de React, evitando soluciones frágiles con CSS y manteniendo intactos el flujo de eventos y el contexto.
Una biblioteca de preguntas de entrevista de IT con respuestas detalladas — de Junior a Senior.
Donar