What are React portals and their use cases?

Portals render children into a DOM node outside the parent component hierarchy. Use cases include modals, tooltips, dropdowns.

import { createPortal } from "react-dom";

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