React Portals

React Portals let a component render its children into a different DOM node while keeping those elements connected to the same React tree. This is useful when UI must escape a parent’s DOM constraints, such as clipping or stacking contexts.

A portal changes where React places DOM nodes, not where those elements belong in the React component hierarchy. You create one with `createPortal(children, domNode)` from `react-dom`.

Because the portal remains part of the same React tree, context continues to work through it. React events also propagate according to the React tree rather than simply following the DOM-parent relationship, so an event from a portal can reach an ancestor component that rendered the portal.

Portals are commonly used for modals, dialogs, tooltips, popovers, and dropdowns that need to escape an ancestor's `overflow`, `z-index`, or positioning constraints. A typical setup provides a dedicated DOM element such as `#modal-root` alongside the application's main root.

A portal does not automatically solve accessibility or focus management. Modal implementations still need appropriate semantics, focus behavior, keyboard handling, and background interaction management. The destination DOM node also needs to exist and be appropriate for the rendered content.

Key points

• `createPortal` renders React children into a specified DOM node.
• The portal preserves the component's React-tree relationship and context.
• React event propagation follows the React tree, even when DOM ancestry differs.
• Portals are useful for UI that must escape clipping, stacking, or positioning constraints.
• Portals do not automatically provide accessibility or focus management.

Interview questions

What problem do React Portals solve?

Portals allow React content to be mounted into a different DOM node than the one implied by normal component nesting. They are useful when an element needs to escape constraints such as `overflow: hidden` or an ancestor stacking context. Common examples include modals, dialogs, tooltips, and popovers. The content is still part of the same React tree.

Does a portal break React context?

No. A portal remains connected to the React tree that created it, even though its DOM nodes are inserted elsewhere. Therefore, context provided by React ancestors remains available to components rendered through the portal. This is one reason portals can be used for application-level dialogs without duplicating context providers.

How do events behave when an element is rendered through a portal?

React's event propagation follows the React component tree rather than the DOM hierarchy. Consequently, an event originating inside a portal can propagate to a React ancestor that is not its DOM ancestor. This distinction matters when implementing click handlers around dialogs or overlays. Developers should still consider native DOM event behavior separately when integrating non-React code.

Why are portals commonly used for modals?

A modal often needs to appear above unrelated application content and avoid clipping or positioning rules imposed by ancestors. Rendering it into a dedicated DOM container can make those constraints easier to manage. At the same time, the modal remains connected to the React tree, so state, props, and context can be used normally. The portal itself does not implement modal accessibility behavior.

What should you consider when choosing the target DOM node for a portal?

The target should be a stable DOM container that is appropriate for the content's ownership, styling, and accessibility behavior. The application should account for cases where that node is unavailable, especially in environments involving server rendering or different document lifecycles. It is also important to understand which CSS and DOM relationships are intentionally changed by moving the node. Finally, cleanup and ownership of dynamically created containers should be explicit.