What is the typical use case of portals?

Question

Accepted Answer

React Portals are primarily used to render UI components such as modals, tooltips, dropdowns, hovercards, and notifications outside of their parent component's DOM tree. This helps avoid common CSS issues caused by parent elements, such as:

**overflow: hidden** on parent elements clipping or hiding child elements like modals or tooltips,
stacking context and **z-index** conflicts created by parent containers that prevent child elements from appearing above other content.

That means, you need to visually “break out” of its container. By rendering these UI elements into a separate DOM node (often directly under <body>), portals ensure they appear above all other content and are not restricted by the parent’s CSS or layout constraints, resulting in correct positioning and visibility regardless of the parent’s styling.