⚛️ React Rendering Masterclass

🧠 How React Thinks: The Secrets of Fiber, Reconciliation and Rendering

🚀 Introduction

Many programmers think that React "just re-renders the component when state changes". But in reality, React has its own "virtual mind" — a complex system that determines:

• what to change in the DOM,
• what to leave the same,
• when to render,
• how not to choke performance.

All of this is possible thanks to the Fiber architecture.

---

🧩 Step 1: The Virtual DOM Concept

React never directly changes the real DOM. Instead, it creates a lightweight copy of it (Virtual DOM) in memory.

function App() {
  return <h1>Hello, Aram!</h1>;
}

React doesn't paint this directly to the screen. First, it creates a Virtual DOM tree:

App
 └── h1
      └── "Hello, Aram!"

When state changes, React creates a new Virtual DOM, compares the old and new versions — 👉 this step is called reconciliation. Then React only changes the differences in the real DOM, whatever has changed.

---

⚙️ Step 2: Fiber — React's "Brain"

Starting from React 16 (Fiber architecture), rendering was completely rewritten. Fiber allows React to interrupt rendering, leave it incomplete and then resume it.

Each component is now represented as a "Fiber node" — an object that holds:

{
  type: ComponentFunction,
  pendingProps: {},
  memoizedState: {},
  return: ParentFiber,
  child: ChildFiber,
  sibling: SiblingFiber
}

This tree allows React to understand:

• who is the parent,
• who is the child,
• who is the next one,
• and whether this Fiber should be re-rendered.

---

🧵 Step 3: Work Loop — Rendering Split Into Parts

React performs rendering in two phases 👇

1. Render phase (pure calculation): React creates a new Fiber tree by comparing the old one (current tree) with the new one (work-in-progress tree). This can be paused or deferred.
2. Commit phase (real DOM changes): React actually updates the DOM only in this phase. This is always synchronous.

Render Phase  →  Commit Phase  →  Browser Paint

This approach is what enables Concurrent Rendering in React 18. React can say: "Wait, I haven't finished rendering this component now, but the other one needs to be shown more urgently."

---

⚡ Step 4: Batching and Scheduler

React never re-renders on every state update. React "batches" them together — in one render.

setCount(c => c + 1);
setCount(c => c + 1);

👉 React sees this as one operation — not two renders. As a result, performance significantly improves.

In Concurrent Mode, React also uses a scheduler that determines:

• which component to render now,
• and which one later, when there's time (Idle Priority Rendering).

---

🔍 Step 5: How to See All This in Action

Open React DevTools → Profiler. There you can see:

• which components are being re-rendered,
• how long the render takes,
• and whether React has batched the updates.

function Counter() {
  const [count, setCount] = useState(0);
  console.log('render');
  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count}
    </button>
  );
}

In the Profiler, you'll notice: React only re-renders the component whose state has changed — not the entire tree.

---

🧩 Conclusion

React is not just a UI library. It's a complete rendering engine with its own scheduler, priority system and memory management. Thanks to Fiber, React can now be:

• more responsive,
• more performant,
• and allow developers to write declarative code without thinking too much about performance.