React Portals

ELI5 — The Vibe Check

React Portals are teleportation devices for your components. Need a modal that renders in document.body but still lives in your component tree? Portal it. It's like the component astral-projects to another DOM node while keeping all its React powers.

Real Talk

React Portals provide a way to render children into a DOM node that exists outside the parent component's DOM hierarchy while maintaining the React event bubbling and context inheritance. They're essential for modals, tooltips, and overlays that need to escape CSS overflow or z-index constraints.

Show Me The Code

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

When You'll Hear This

"Use a Portal for modals so they don't get clipped by overflow: hidden" / "Events still bubble through the React tree, not the DOM tree"