Portals & Overlay Architecture
Portals render a subtree into a different DOM location while preserving its React relationship. They are commonly used for dialogs, tooltips, menus, and overlays that need to escape clipping or stacking contexts.
Even though the DOM location changes, React context and event relationships follow the React tree. This is useful for building overlays that still belong to the component that controls them.
Accessibility remains your responsibility: focus, labels, keyboard dismissal, and modal semantics must be implemented correctly.
Portal concept
createPortal(
<div role="dialog" aria-modal="true">...</div>,
document.body
);💡 The dialog can escape an ancestor's overflow or stacking context while remaining part of the same React tree.
Key Takeaways
- Portals solve DOM placement problems, not accessibility automatically.
- Context relationships remain based on the React tree.
- Overlays need deliberate focus and keyboard behavior.