⚛️ React Component Life Cycle

A simple beginner-friendly explanation of how React components work internally.

---

🧠 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, developers build UI using components.

A component is simply a JavaScript function that returns UI.

Example:

function Welcome() {
  return <h1>Hello Captain</h1>;
}

Components help developers:

• Reuse UI
• Organize code
• Build scalable applications

---

2️⃣ Components Return JSX

Inside the component, React returns JSX.

Example:

return <h1>Hello</h1>;

JSX looks like HTML, but it is actually JavaScript syntax used by React.

Browsers cannot understand JSX directly.

So React converts it internally.

---

3️⃣ JSX Converts into React Elements

React converts JSX into JavaScript objects called React Elements.

Example:

<h1>Hello</h1>

becomes:

{
  type: "h1",
  props: {
    children: "Hello"
  }
}

React Elements are lightweight descriptions of UI.

---

🔑 React Element Structure

A React Element mainly contains:

Property	Meaning
type	Which HTML tag/component
props	Additional properties/data
children	Content inside element
key	Unique identifier for lists

---

4️⃣ React Creates Virtual DOM

Using React Elements, React creates a Virtual DOM.

What is Virtual DOM?

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

Virtual DOM = Fast in-memory representation of UI

React uses it for fast UI updates.

---

5️⃣ React Compares Changes (Diffing)

Whenever state or props change:

React creates a new Virtual DOM.

Then React compares:

Old Virtual DOM
vs
New Virtual DOM

This process is called:

Diffing / Reconciliation

React checks:

"What exactly changed?"

instead of rebuilding the entire page.

---

6️⃣ React Updates Real DOM

After finding the differences:

React updates only the changed parts in the Real DOM.

This makes React:

• Faster
• More efficient
• Better for dynamic applications

---

7️⃣ Browser Displays Updated UI

Finally:

The browser paints the updated UI for the user.

React itself does not directly display UI.

The browser renders it.

---