What is the role of `react-dom`? | Interview Question

Q: What is the role of `react-dom`?

**Target Audience:** Frontend engineers preparing for React interviews — assumes basic familiarity with components. **Difficulty:** Easy to Medium > **How to read this doc:** Every concept is explained in plain language first. Right after, you will see a callout like 📌 Interview term: — that is the exact vocabulary a senior engineer would use for the same idea. Every package-export and behavioural claim below was produced by actually running React 19.2.8 in this repo, not described from documentation. ## 1. Why This Even Matters — A Story First react is an architect. It designs the blueprint (your components), works out what changed between two versions of the plan, and decides what needs rebuilding. But an architect does not pour concrete or hang drywall. react-dom is the construction crew that takes that blueprint and actually builds it — specifically, into a web browser DOM. The split matters because the same architect can hand blueprints

01

Understand the problem

Question presented to candidate: "You have got react and react-dom in your package.json. What is the difference — why are they two separate packages, and what does react-dom actually do?"

What a strong answer should cover:

react is the platform-agnostic core: components, Hooks, and reconciliation. It has no idea what a <div> is.
react-dom is the renderer that applies React's output to a real browser DOM.
The three entry points: react-dom/client (createRoot / hydrateRoot), react-dom/server (renderToString and the streaming APIs), and the top-level react-dom utilities.
Why the split exists: the same component code can target other renderers — React Native, react-three-fiber, react-pdf.
ReactDOM.render, ReactDOM.hydrate, and ReactDOM.findDOMNode were deprecated in React 18 and removed in React 19.
Bonus signal: useFormStatus ships from react-dom, not react — a detail most candidates get backwards.

Clarifying questions expected:

"Which React version are we targeting?" — the answer changes for 19 vs. 17.
"Do you want the client story, the server story, or both?"

Code / implementation expected: Optional. A short createPortal snippet is the strongest concrete demonstration of a react-dom-specific capability.

react-domdomrenderingarchitecture

02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Target Audience: Frontend engineers preparing for React interviews — assumes basic familiarity with components. Difficulty: Easy to Medium

How to read this doc: Every concept is explained in plain language first. Right after, you will see a callout like 📌 Interview term: — that is the exact

Solution ready — 2 min read

Classified // press E to declassify

04

Explore the playground snippets

createPortal — a modal that escapes its parent DOM node

Run Playground

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

// The portal target. In a real app this is a <div id="modal-root"> that lives
// in index.html as a sibling of the app root.
function useModalHost() {
  const host = document.getElementById("modal-root") ?? (() => {
    const el = document.createElement("div");
    el.id = "modal-root";
    document.body.appendChild(el);
    return el;
  })();
  return host;
}

function Modal({ onClose }) {
  const host = useModalHost();
  return createPortal(
    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.5)" }}>
      <div style={{ background: "#fff", margin: "20vh auto", padding: 24, width: 280, borderRadius: 8 }}>
        <p style={{ marginTop: 0 }}>I render into #modal-root, not into my parent.</p>
        <button onClick={onClose}>Close</button>
      </div>
    </div>,
    host,
  );
}

export default function App() {
  const [open, setOpen] = useState(false);
  const [clicks, setClicks] = useState(0);

  return (
    // This handler still fires for clicks inside the portal: events bubble
    // through the REACT tree, not the DOM tree.
    <div onClick={() => setClicks((c) => c + 1)} style={{ padding: 24, fontFamily: "system-ui" }}>
      <p>Clicks seen by the logical parent: <strong>{clicks}</strong></p>
      <button onClick={() => setOpen(true)}>Open modal</button>
      {open && <Modal onClose={() => setOpen(false)} />}
      <p style={{ color: "#666", fontSize: 13 }}>
        Open the modal and click Close — the parent counter still increments,
        even though the modal DOM lives outside this div.
      </p>
    </div>
  );
}

05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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