React vs ReactDOM: What’s the Difference? A Deep Dive Into How They Actually Work Together

If you have built even a single React project, you have seen this line more times than you can count:

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

Most developers copy this snippet from a tutorial, paste it into their project, and… move on.

But sooner or later, a question comes up:

• Why do React and ReactDOM exist as separate libraries?
• Why can't React render to the DOM?
• What is React actually doing—and what is ReactDOM doing?**

If you have ever wondered about this, you are not alone.

This article breaks down the real story behind React and ReactDOM; how they interact, why they were separated from the beginning, and how this architecture powers everything from web apps to mobile apps to VR.

React: The Brain That Knows Your UI

React is often described as a view library—but that description does not do it justice.

React is the architect of your UI. It understands:

• What components are?
• How should state changes affect the UI?
• How to compute the next version of the interface?
• How to compare updates efficiently?
• How to run lifecycle logic?
• How to manage hooks?

React is extremely smart. It reasons about your UI with near-perfect efficiency.

But here is the twist:

React does not know how to talk to the browser.
It does not know what a DOM node is.
And it never touches the actual screen.

React only works with descriptions of UI, not actual UI.

These descriptions form the Virtual DOM.

Virtual DOM: React’s Mental Model of Your UI

Whenever you write:

<h1>Hello World</h1>

React transforms this into a plain JavaScript object:

{
  type: "h1",
  props: { children: "Hello World" }
}

This object is not a real <h1> element.
It is just a blueprint.

React then uses this blueprint to:

• Build a virtual tree of UI
• Compare it with the previous tree
• Calculate the minimal set of updates

All of these operations happen entirely in JavaScript, without touching a single pixel on the screen.

To actually make the UI appear, React needs a partner.

ReactDOM: The Builder That Touches the Real World

If React is the architect, ReactDOM is the construction team.

ReactDOM takes the virtual description React produces and:

• Creates real DOM nodes
• Inserts them into the browser
• Removes old nodes
• Updates attributes and styles
• Attaches event listeners
• Manages the commit phase
• Handles hydration
• Coordinates with the browser for performance

ReactDOM is the only part of React that actually interacts with the DOM.

This is why the separation matters.

ReactDOM is platform-specific, but React is not.

How React and ReactDOM Collaborate (The Full Rendering Pipeline)

Let's walk through what really happens when your application renders.

1. Your component runs

React calls your component:

function App() {
  return <h1>Hello</h1>;
}

2. React generates a Virtual DOM node

A lightweight JavaScript object representing your UI.

3. React compares new vs old trees

This is reconciliation—React figures out what changed.

4. React hands ReactDOM a “patch list”

React does not mutate anything itself. It only says: “Here’s what needs to change.”

5. ReactDOM applies the changes to the real DOM

This is called the commit phase, and ReactDOM performs:

• DOM creation
• DOM updates
• DOM removal
• Event binding
• Text updates

This is where the UI finally appears.

React Fiber: The Engine Powering Modern React

Since React 16, React uses an internal architecture called Fiber, which makes rendering smarter and smoother.

Fiber enables:

• Interruptible rendering
• Prioritising urgent updates
• Scheduling tasks
• Supporting concurrent mode
• Preparing React for React 18 and beyond

React builds a Fiber tree internally. ReactDOM uses that Fiber tree to apply actual DOM mutations.

This separation of responsibility makes React extremely powerful.

ReactDOM.createRoot(): Why React 18 Changed Everything

Before React 18, we used:

ReactDOM.render(<App />, root);

React 18 introduced:

ReactDOM.createRoot(root).render(<App />);

Why?

Because React 18 added:

• Concurrent rendering
• Transitions
• Streaming Suspense
• Selective hydration
• Better scheduling

These features required ReactDOM to act as a more advanced coordinator between React and the browser.

React remained platform-agnostic. ReactDOM evolved.

Why ReactDOM Is Separate: The Multi-Renderer Architecture

If React directly rendered to the browser DOM, React Native would never exist.

React’s secret superpower is that it can render to anything.

Here are real examples:

Renderer	Platform
ReactDOM	Browser
React Native	iOS/Android
Ink	Terminal apps
React-three-fiber	WebGL/3D
React-pdf	PDFs
React-360	VR

All of them use React, but none rely on ReactDOM.

This is why React and ReactDOM are separate packages.
The architecture is modular by design.

What About Hydration?

When server-side HTML is already present in the DOM, ReactDOM:

• Reads the existing HTML
• Reuses DOM nodes
• Attaches event listeners
• Activates the page

This is hydration, and ReactDOM handles it entirely.

React doesn't know hydration exists. It only deals with the Virtual DOM and reconciliation.

React vs ReactDOM — Human-Friendly Summary

React

• Thinks
• Calculates
• Plans updates
• Manages state & hooks
• Builds the Virtual DOM
• Performs reconciliation
• Creates the Fiber tree

ReactDOM

• Creates real DOM nodes
• Updates the screen
• Handles events
• Coordinates scheduling
• Applies patches
• Manages hydration
• Interacts with the browser’s rendering pipeline

React is the brain. ReactDOM is the hands.

Together, they create the seamless UI development experience we love.

Conclusion

React and ReactDOM may look like two separate packages that confuse, but their separation is actually a stroke of architectural brilliance.

By keeping rendering logic out of React itself, the library can:

• Render to multiple platforms
• Enable performance optimisations
• Support React Native
• Power advanced features like concurrent rendering
• Remain lightweight and flexible

The next time you write:

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

You will know you are witnessing a well-designed conversation:

• React decides what the UI should look like
• ReactDOM decides how to make it real

A perfect partnership.