Portals

🔍 What Is It?

Portals are used when a component needs to render outside its parent DOM hierarchy.

• →Common for modals, drawers, tooltips, and popovers
• →Avoids clipping, stacking, and overflow problems
• →Keeps React context and event propagation intact
• →Requires deliberate focus and accessibility handling

🎯 Why Do We Need It?

Without portals, overlays often break because a parent has overflow hidden, a lower stacking context, or layout rules that trap the UI inside the wrong container.

🏗️ What Happens in Real Projects?

Production apps use portals for dialogs, command palettes, dropdown menus, toasts, onboarding layers, and support widgets that must visually escape the page layout.

⚙️ How It Works

ReactDOM.createPortal renders the JSX into a target DOM node such as #modal-root. Even though the DOM lives elsewhere, the component still reads context from its original parent and React events bubble through the React tree.

💻 Example

Modal with a Portal Root — A portal solves layering problems, but accessibility still needs to be handled deliberately.

import { createPortal } from 'react-dom';

function Modal({ open, children }: { open: boolean; children: React.ReactNode }) {
  if (!open) return null;

  const portalRoot = document.getElementById('modal-root');
  if (!portalRoot) return null;

  return createPortal(
    <div role="dialog" aria-modal="true" className="overlay">
      <div className="modal">{children}</div>
    </div>,
    portalRoot
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits