A [React](/courses/reactjs) Portal lets you render a component into a different DOM [node](/courses/nodejs) while keeping that component inside the same [React](/courses/reactjs) component tree. Portals are especially useful for UI that should visually escape its parent's layout or stacking context, such as: ```text Modals Tooltips Dropdown menus Overlays Floating panels ``` ### Basic Example Suppose your [HTML](/courses/html) contains: ```html

``` A modal can be rendered into `portal-root`: ```jsx import { createPortal } from "react-dom"; function Modal({ children }) { const portalRoot = document.getElementById("portal-root"); return createPortal(

{children}

, portalRoot ); } ``` Then use it normally: ```jsx function App() { return (

Dashboard

Modal content

); } ``` Even though `Modal` is declared inside `App`, its DOM is rendered elsewhere. Conceptually: ```text React tree App └── Modal DOM tree body ├── #root │ └── App │ └── #portal-root └── Modal DOM ``` ### Why Is This Useful? Imagine a component is inside a container with: ```css overflow: hidden; ``` A dropdown or tooltip rendered normally inside that container may be clipped. Portals allow the floating UI to render elsewhere in the document where it is not constrained by that parent layout. ### Portals Do Not Break React Relationships Although the DOM location changes, the component still belongs to the same React tree. That means it can still use: ```text Props State Context Hooks React event handling ``` just like other descendants. ### Events Follow the React Tree This is an important interview point. Events from portal content can propagate through the React component tree even though the portal DOM [node](/courses/nodejs) exists elsewhere in the document. For example: ```jsx function Parent() { function handleClick() { console.log("Parent clicked"); } return (

); } ``` Clicking the portal button can still participate in React event propagation toward `Parent`. ### Portal Does Not Automatically Make a Good Modal A portal only changes where the DOM is rendered. You still need to implement things such as: ```text Accessibility Focus management Keyboard handling Backdrop Scroll locking Closing behavior ``` ### Interview-Ready Answer A React Portal renders a component's DOM into another DOM node while keeping the component in the same React tree. Portals are useful for modals, tooltips, dropdowns, and overlays that need to escape parent layout constraints. Context and React event propagation still work according to the React tree.