← React Beginner Questions - Set 4 Q36

What are portals in React?

React Beginner Questions - Set 4

A portal renders children into another DOM node while keeping them inside the React tree — the standard solution for modals and tooltips.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import { createPortal } from 'react-dom';

function Modal({ open, onClose, children }) {
  if (!open) return null;

  return createPortal(
    <div className="backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    document.body          // rendered here, owned by the React tree
  );
}

// Events still bubble through React's tree, not the DOM's

What to notice

• Context, event bubbling and error boundaries follow the React tree, which is why portals do not break state.
• The target node must exist before rendering — `document.body` always does.
• Useful for modals, dropdowns, toasts: anything that must escape an `overflow: hidden` ancestor.