How does React work?

Updated Feb 20, 2026

Short answer

In React, React works by creating a component-based UI system that builds a virtual representation of the UI, detects changes in state, and efficiently updates only the necessary parts of the real DOM.

It uses a process called reconciliation to compare updates and apply minimal changes to the browser.

Deep explanation

1. Component-Based Architecture

React applications are built using components, which are reusable building blocks of UI.

JSX

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

Each component:

Has its own logic
Returns UI (JSX)
Can be reused and nested

---

2. JSX → JavaScript

React uses JSX, a syntax that looks like HTML but is converted into JavaScript.

JSX

const element = <h1>Hello</h1>;

This becomes:

JavaScript

const element = React.createElement("h1", null, "Hello");

---

3. Virtual DOM

React creates a lightweight copy of the real DOM called the Virtual DOM.

When state changes:

A new Virtual DOM is created
It is compared with the previous one
Only differences are identified

---

4. Reconciliation (Diffing Algorithm)

React uses a process called reconciliation to find what changed.

Example:

Before:

HTML

<h1>Hello</h1>

After:

HTML

<h1>Hello React</h1>

React:

Compares old vs new virtual DOM
Detects only text change
Updates only that part of real DOM

👉 This makes React very fast.

---

5. State and Re-rendering

When state changes, React re-renders the component.

JSX

1import { useState } from "react";
2
3function Counter() {
4  const [count, setCount] = useState(0);
5
6  return (
7    <button onClick={() => setCount(count + 1)}>
8      {count}
9    </button>
10  );
11}

Flow:

User clicks button
State updates
Component re-renders
Virtual DOM updates
React updates only changed UI

---

6. One-way Data Flow

React follows unidirectional data flow:

Parent → Child via props
Data flows in one direction

This makes the app predictable and easier to debug.

---

7. Efficient Updates (Fiber Architecture)

Modern React uses the Fiber architecture, which allows:

Breaking rendering work into small units
Prioritizing important updates
Pausing and resuming rendering

This improves responsiveness in large apps.

Real-world example

Scenario: Like button in a social media app

JSX

1function LikeButton() {
2  const [likes, setLikes] = useState(0);
3
4  return (
5    <button onClick={() => setLikes(likes + 1)}>
6      ❤️ {likes}
7    </button>
8  );
9}

What happens internally:

User clicks button
setLikes updates state
React creates new virtual UI
React compares old vs new UI
Only the number updates in DOM
No full page reload occurs

---

Why React is Fast

React is fast because it:

Minimizes direct DOM manipulation
Uses Virtual DOM diffing
Batches updates
Updates only what changed

Common mistakes

### 1. Thinking React updates the real DOM directly
React updates the Virtual DOM first, then efficiently syncs changes to the real DOM.
---
### 2. Thinking re-render means full page reload
Re-render = re-executing component function, not reloading the page.
---
### 3. Assuming state updates instantly
State updates are asynchronous and may be batched.
---
### 4. Over-optimizing without understanding reconciliation
Not all re-renders are bad—React is designed to handle them efficiently.
---
## Core Idea
React works like this:
> UI = f(state)
Whenever state changes:
* React re-runs components
* Builds new Virtual DOM
* Compares changes
* Updates only what is necessary in the real DOM

Follow-up questions

What is the Virtual DOM in detail?
How does React Fiber improve performance?
What is reconciliation in React?
Why is React faster than direct DOM manipulation?
What causes unnecessary re-renders in React?