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

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-dom
dom
rendering
architecture

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

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 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

The solution is hidden so you can try first

7 min read · 9 sections

Try it in the playground

Open any example in the playground to run and change it.

ReactcreatePortal — a modal that escapes its parent DOM node

Open in 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>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.