Portals (createPortal) in React

From the React Components & JSX cheat sheet · Optimization & Advanced Features · verified Jul 2026

Portals (createPortal)

Render children into a different DOM node outside the parent hierarchy

jsx

import { createPortal } from 'react-dom';

function Modal({ children, onClose }) {
  return createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal">{children}</div>
    </div>,
    document.body
  );
}

💡 Portals render into any DOM node but stay in the React tree — events bubble normally

⚡ Use portals for modals, tooltips, dropdowns — anything that needs to escape overflow:hidden

📌 Even though the DOM node is elsewhere, Context, refs, and events all work as expected

🟢 Stop click propagation on the inner content to prevent overlay clicks from closing the modal

portalmodaltooltip

More React tasks

Suspense & lazy()
Error Boundaries
React.memo & Optimization
Styling Components
StrictMode

Back to the full React Components & JSX cheat sheet