React Components, Virtual DOM & Reconciliation Explained

One of the most important features of React is components. Components are the building blocks of a React app — they let you break up the user interface into separate pieces that can be reused and handled independently.

A React component can be either stateful or stateless. It takes an optional input and returns a React element which is rendered on the screen.

---

React and React DOM

To work with React in the browser, we need two libraries: React and ReactDOM.

• React is responsible for creating views.
• ReactDOM is responsible for actually rendering UI in the browser.

React follows a Declarative Programming Approach — we don't directly update the DOM. Instead, we tell React how the UI should look, and React + ReactDOM handle all DOM updates for us.

ReactDOM acts as the intermediary between React and the browser DOM. After creating components using the React library, ReactDOM handles the rendering process by calling ReactDOM.render().

---

JSX and React Elements

A React component can be class-based or function-based. Here's a simple functional component:

const App = () => {
  return <h1>Hello World!</h1>;
}

Although this looks like HTML, it's actually JSX — a JavaScript extension that gives your JS code an HTML-like syntax.

Behind the scenes, JSX is transpiled by Babel into plain JavaScript:

React.createElement("h1", null, "Hello World!");

JSX is simply syntactic sugar for React.createElement() calls.

---

What is React.createElement?

A React element is a plain JavaScript object that describes a DOM element in memory. We create them using React.createElement().

So when we write components, we're really creating JS objects that tell the browser how the UI should look. ReactDOM then takes those objects and renders them into actual DOM nodes — recursively creating nodes based on their type property.

---

Virtual DOM and Reconciliation

React maintains a copy of the real DOM called the Virtual DOM — a lightweight, in-memory representation. This is one of the key reasons React is fast, since real DOM manipulations are expensive.

When state or data changes, React:

1. Creates a new Virtual DOM
2. Diffs it against the previous Virtual DOM (the diffing algorithm)
3. Batches the changes and updates only the necessary parts of the real DOM

This entire process — creating, diffing, and patching — is called Reconciliation.

---

The Rendering Cycle

React's rendering cycle has two phases:

1. Render Phase

There are two types of renders: initial render and re-render.

Initial Render flow:

• Components are parsed and JSX is converted to React elements via React.createElement()
• A Virtual DOM is created from those elements and passed to the Commit Phase

2. Commit Phase

This is where React actually touches the DOM.

React compares the new and previous Virtual DOMs using the diffing algorithm, then applies the minimum necessary changes to the real DOM via ReactDOM.

---

How Re-Renders Work

A re-render is triggered when state is updated or a prop changes. Here's the flow:

1. The component that triggered the state change is flagged
2. That component and all its children are re-parsed and converted to React elements
3. A new Virtual DOM is created and compared with the previous one
4. Changes are sent to the Commit Phase and applied to the real DOM

Note: If you update a state hook to the same value as the current state, React bails out — no re-render occurs. React uses Object.is for comparison, which is why state updates should always be immutable.

---

Summary

Concept	Role
React	Creates components and React elements
ReactDOM	Renders elements to the browser DOM
JSX	Syntactic sugar for React.createElement()
Virtual DOM	In-memory copy of the real DOM
Reconciliation	The process of diffing and patching the DOM
Re-render	Triggered by state or prop changes

Understanding these fundamentals gives you a solid mental model for writing efficient, predictable React applications.