React vs ReactDOM & Virtual DOM: Key Differences

React vs ReactDOM and the Virtual DOM

Two Packages, Two Jobs

When you install React, you get two separate packages. Beginners often wonder why.

The split exists because React's core logic is not tied to browsers. react-native uses the same react package to render to mobile screens instead. The core stays the same; only the renderer changes.

This is why main.jsx has two different imports:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

What is the Virtual DOM?

The real DOM is the browser's representation of the page. Updating it is comparatively slow, especially when you do it many times in a row.

The Virtual DOM is a plain JavaScript object that describes what the page should look like. It is cheap to create and cheap to compare.

Here is what happens when data changes:

1. React builds a new Virtual DOM tree reflecting the new data.
2. It compares the new tree with the previous tree. This comparison is called diffing.
3. It works out the smallest set of real DOM changes needed.
4. It applies only those changes to the real page.

Why is it Used?

Imagine a list of 50 courses where only one course's progress changes from 40% to 45%.

• Without the Virtual DOM, a naive approach would rebuild all 50 cards.
• With the Virtual DOM, React identifies that exactly one text node changed and updates only that.

This is not magic performance. It is React doing the careful, tedious DOM bookkeeping you would otherwise have to write yourself correctly, every time.