🧠 React Internal Working — Full Breakdown Notes

✅ 1. What happens when you call ReactDOM.createRoot().render(...)?

Let’s say:


const element = <h1>Hello, React</h1>;
ReactDOM.createRoot(document.getElementById("root")).render(element);

🔍 Step-by-Step Internals:

Step What Happens Internally
1️⃣ JSX gets converted to a ReactElement (a plain JS object)
2️⃣ ReactDOM.createRoot() prepares a place in the DOM
3️⃣ .render() tells React to reconcile the ReactElement with the real DOM
4️⃣ React uses Fiber architecture to build a Fiber Tree
5️⃣ React performs Reconciliation: compares new tree with old
6️⃣ React applies minimal changes to the DOM (via Virtual DOM)

🔧 JSX → ReactElement


const el = <h1>Hello</h1>

Becomes:

const el = {
  type: "h1",
  props: {
    children: "Hello"
  }
}

This is not DOM — just a JS object React understands.

🔗 Fiber Architecture (React ka dimaag)

Fiber = React's engine to manage: