What are React Portals and when would you use them?

Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

They're commonly used for modals, tooltips, and other overlays.

Portals are useful when you need to render a component outside its parent's DOM container, such as rendering a modal that should appear on top of everything else.

import ReactDOM from 'react-dom';

function Modal({ children }) { return ReactDOM.createPortal( <div className="modal"> {children} </div>, document.getElementById('modal-root') ); }

// Usage function App() { return ( <div> <h1>My App</h1> <Modal> <h2>Modal Content</h2> </Modal> </div> ); }