What are React portals?
Answer
React Portals allow rendering a component's output into a DOM node that is outside the parent component's DOM hierarchy. ReactDOM.createPortal(child, containerDOMNode). Example: a modal dialog that should render at the <body> level to avoid CSS overflow:hidden or z-index issues: function Modal({ children }) { return ReactDOM.createPortal(<div className="modal">{children}</div>, document.body); }. Although the modal's DOM lives outside its parent in the HTML, it still behaves as a React child — events bubble up through the React component tree (not the DOM tree), and context works across portals. Common use cases: modals and dialogs, tooltips and popovers, dropdown menus, notification toasts — any UI that must visually escape its container's stacking context. Accessibility: remember to manage focus when a portal renders an interactive element, trap focus within modals, and handle keyboard events appropriately. Libraries like Radix UI and Headless UI use portals under the hood for these components.