How React Works

In the last lesson, React Features, you saw the things that make React nice to work with. Now let’s look at what really happens when React puts your screen together. It’s the one idea that makes everything else click.

🤔 Why You Need to Understand This

Here is the pain you would hit with a plain web page:

• A web page is made of the DOM, which is the live tree of elements the browser draws on screen.
• Changing the DOM by hand is slow and messy.
• Touch it too often and the page starts to feel heavy and laggy.

The old way of doing this got tangled fast:

• Your data changes, so you go find the right element, then you update it yourself.
• Do that across a big app and the code turns into a tangle.
• And redrawing big parts of the page again and again makes the browser do a lot of extra work.

React fixes all of this with one clever move:

• You describe what the screen should look like.
• Then React works out the smallest change needed to make the real page match.
• So you stop hand-editing the DOM, right? React does the careful part for you.

🧩 What Actually Happens

Let’s build the picture step by step. There are a few pieces, so we’ll name each one in plain words first.

• Component — a function you write that returns what a piece of the UI should look like.
• Real DOM — the actual elements the browser shows on screen.
• Virtual DOM — a lightweight copy of that page, kept in memory as plain JavaScript objects.

Think of it like a builder and a blueprint. You don’t walk into the house and start moving walls. You mark the change on the blueprint first. Then the builder compares the new blueprint with the old one. They only touch the wall that moved. The virtual DOM is that blueprint. It is cheap to make and cheap to compare, because it is just objects in memory, not real page elements.

🔁 The Update Loop

So what happens the moment your data changes? React runs a small loop. Here it is in order.

• Your data changes. Maybe someone clicks a button. Maybe a number goes up.
• React calls your component again and gets a fresh virtual DOM.
• React compares the new virtual DOM with the old one. This compare step is called reconciliation, and the comparing itself is often called diffing.
• React finds exactly what changed. Then it updates only those spots in the real DOM.

That last point is the whole secret. React does not rebuild the page. It changes the one thing that is different and leaves everything else alone.

Here is that loop as a picture.

🔢 A Counter, One Number Changing

Let’s make this real with the smallest example: a counter. There is a label and a button. Each click adds one to the count.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

Now let’s walk through what React does on a click.

• The click calls setCount, so the data (count) changes from 0 to 1.
• React calls Counter again and gets a new virtual DOM. It says the text is now “You clicked 1 times”.
• React diffs the new virtual DOM against the old one. The only difference is that one number inside the <p>.
• React updates just that text in the real DOM. The button, the <div>, the page around it — none of that gets redrawn.

That is the payoff. You wrote what the UI should be (You clicked {count} times), and React quietly found the one piece of text that needed to change.

You clicked 3 times
[ Click me ]

🆚 Virtual DOM vs Real DOM

A quick side-by-side so the two don’t blur together.

⚠️ Common Mistakes

A few wrong ideas trip people up early. Let’s clear them now.

• Thinking the virtual DOM is faster than the real DOM. It is not a faster DOM. It is a way to find the smallest real change. The real DOM is still what the user sees.
• Thinking React redraws the whole page on every change. It does not. It updates only the parts that actually changed.
• Changing the page yourself by hand. Reaching for the real DOM directly fights React’s loop and causes bugs.

// ❌ Don't grab and edit the real DOM yourself
document.querySelector("p").textContent = "You clicked 1 times";

// ✅ Change your data, and let React update the screen
setCount(count + 1);

✅ Best Practices

Keep these simple habits and React’s loop stays smooth.

• Let your data decide the screen. Change the data, not the DOM.
• Keep components small so each one returns one clear piece of UI.
• Trust React to do the diffing. You describe the result, not the steps to get there.

🧩 What You’ve Learned

A quick recap of the big picture.

• ✅ You write components that return what the UI should look like.
• ✅ React keeps a virtual DOM, a copy of the page in memory.
• ✅ When data changes, React makes a new virtual DOM and compares it with the old one (reconciliation, or diffing).
• ✅ React then updates only the real DOM parts that actually changed, which is what makes it fast.

🚀 What’s Next?

Now that you know how React thinks, let’s get a real React project running on your machine so you can try it yourself.

Setting Up React Environment