What are React Portals use cases?

React Portals render children into a DOM node outside the component's position in the DOM tree. Primary use cases: (1) Modals and Dialogs: must appear above all other content. Rendering inside a parent with overflow: hidden or low z-index would clip the modal. Portaling to document.body avoids this. (2) Tooltips: must escape any ancestor with overflow: hidden and appear at the top of the stacking context. (3) Dropdown menus: same overflow/z-index issues as tooltips. (4) Toast notifications: fixed-position elements that overlay all content. (5) Full-screen overlays. How portals maintain React behavior: although the DOM node is outside the parent, the portal is still part of the React tree — event bubbling follows the React component hierarchy, not the DOM hierarchy. Clicking inside a portal triggers React event handlers in parent components even though the DOM is elsewhere. Context works across portals. Accessibility: portaling a dialog requires proper focus management, ARIA attributes (role="dialog", aria-modal), and focus trapping to be accessible. Libraries like Radix UI primitives handle all accessibility requirements.