⚛️

If you're learning React, one of the most important concepts is understanding what happens internally when a component renders.

At first, React can feel magical.

You write JSX… and somehow the UI updates automatically.

But behind the scenes, React follows a very systematic rendering flow.

Let’s break it down step-by-step 👇

React Rendering Flow

Developer Writes Components

        ↓

Components Return JSX

        ↓

JSX Converts into React Elements

        ↓

React Creates Virtual DOM

        ↓

React Compares Old & New Virtual DOM

        ↓

Updates Only Changed Parts in Real DOM

        ↓

Browser Displays Updated UI

1 Developer Creates Components

In React, UI is built using components.

A component is simply a JavaScript function that returns UI.

Example:

function Welcome() {

  return <h1>Hello Captain</h1>;

}

Components make applications:

• Reusable


• Organized


• Scalable


• Easier to maintain

2 Components Return JSX

Inside components, we usually return JSX.

Example:

return <h1>Hello</h1>;

JSX looks like HTML, but it’s actually JavaScript syntax.

Browsers cannot understand JSX directly.

So React transforms it internally before rendering.

3 JSX Converts into React Elements

React converts JSX into plain JavaScript objects called React Elements.

Example:

<h1>Hello</h1>

becomes something like:

{

  type: "h1",

  props: {

    children: "Hello"

  }

}

These objects describe what the UI should look like.

React Element Structure

A React Element mainly contains:

4 React Creates the Virtual DOM

Using React Elements, React builds a Virtual DOM.

What is Virtual DOM?

A lightweight JavaScript representation of the Real DOM stored in memory.

Virtual DOM = Fast in-memory copy of UI

Instead of directly manipulating the browser DOM every time something changes, React first updates the Virtual DOM.

This makes rendering much faster and more efficient.

5 React Performs Diffing (Reconciliation)

Whenever state or props change:

React creates a new Virtual DOM.

Then React compares:

Old Virtual DOM

vs

New Virtual DOM

This comparison process is called:

Diffing / Reconciliation

React tries to identify:

"What exactly changed?"

instead of rebuilding the entire page.

6 React Updates the Real DOM

After finding the differences:

React updates only the changed parts in the Real DOM.

This selective updating is why React apps feel fast and responsive.

Benefits:

• Better performance


• Efficient updates


• Smooth UI interactions

7 Browser Paints the Updated UI

Finally, the browser renders the updated UI on the screen.

Important point:

React manages updates,

but the browser actually displays the UI.

Why React Is Fast

React improves performance because it:

• Uses Virtual DOM


• Updates only changed elements


• Avoids unnecessary DOM operations


• Efficiently re-renders components

Final Thoughts

Understanding React’s rendering flow helps you:

• Write better components


• Optimize performance


• Debug rendering issues


• Understand hooks and state updates more deeply

Once you understand this internal workflow, React becomes much easier to reason about.

What helped you understand React rendering for the first time?

Drop your thoughts below