hardFrontend

What are Portals in React and when would you use them?

Q: What are Portals in React and when would you use them?

**Core concept (TL;DR).** A portal renders a component's children into a **DOM node outside the parent's hierarchy** (e.g. document.body ) while keeping it in the **React tree** — so context and event bubbling still work normally. Use portals for **modals, tooltips, dropdowns, and toasts** that must escape a parent's overflow / z-index /clipping. React tree stays; DOM node moves elsewhere <text x="130" y="64" fill="#8b5cf6" font-size="10" font-weight="700" text-a

888 views

Understand the problem

Describe React Portals and identify scenarios where they are particularly useful.

portalsdomuiadvanced

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A modal via createPortal

import { useState } from "react";
import { createPortal } from "react-dom";

function Modal({ onClose, children }) {
  return createPortal(
    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.5)" }}
         onClick={onClose}>
      <div style={{ background: "#fff", margin: "10% auto", padding: 24, width: 280 }}>
        {children}
      </div>
    </div>,
    document.body                       // rendered here, not in the parent DOM
  );
}

export default function App() {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ padding: 24, fontFamily: "system-ui", overflow: "hidden" }}>
      <button onClick={() => setOpen(true)}>Open modal</button>
      {open && <Modal onClose={() => setOpen(false)}>Hi from a portal!</Modal>}
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How does streaming SSR with selective hydration work?

How can the `key` prop be used to deliberately reset component state?