Portals

ELI5 — The Vibe Check

React Portals let you teleport a component's HTML output to a completely different part of the DOM while keeping it logically in the same place in your component tree. It's like a portal gun from Portal — your modal lives in the component tree but renders at document body. Thinking with portals!

Real Talk

React Portals provide a way to render children into a DOM node that exists outside the parent component's DOM hierarchy. They're commonly used for modals, tooltips, and dropdowns that need to break out of overflow:hidden containers or z-index stacking contexts while maintaining React event bubbling.

Show Me The Code

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    <div className="modal-overlay">{children}</div>,
    document.getElementById('modal-root')
  );
}

When You'll Hear This

"Use a Portal for that modal — otherwise the parent's overflow:hidden will clip it" / "Portals let our tooltip escape any stacking context"