easyFrontend

What is the role of `react-dom`?

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

**Core concept (TL;DR).** react is the renderer-agnostic core (components, hooks, elements); react-dom is the package that **renders React to the browser DOM**. It provides createRoot / render (mount an app), hydrateRoot (attach to SSR HTML), createPortal , and flushSync . One core, many renderers react (core) <g f

949 views

Understand the problem

This question clarifies the distinction between React's core logic and its platform-specific rendering.

react-domdomrenderingarchitecture

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

Mounting with react-dom

import { createRoot } from "react-dom/client";

function App() {
  return <h1 style={{ fontFamily: "system-ui" }}>Hello from react-dom</h1>;
}

// react-dom turns the React tree into real DOM and mounts it:
//   const root = createRoot(document.getElementById("root"));
//   root.render(<App />);
// (hydrateRoot(...) would be used instead for server-rendered HTML.)

export default App;

Join the discussion

Discussion (0)

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

How do you handle side effects in functional components?

What are React Developer Tools and how do you use them?