How I Currently Understand Rendering in React (My Improved Mental Model)

Source: Dev.to

Components and Component Instances

First of all, we create a React component. A component is basically a JavaScript function. By itself, it has no effect on the browser screen—nothing is visible just by defining a component.

When we use that component in JSX, React creates a component instance. A component can have one instance or multiple instances. Each instance:

• has its own state
• receives its own props
• has its own lifecycle
• keeps its own memory

I think of a component instance like a living object. It exists in time, can change, can update, and React keeps track of it.

From Component Instance to React Element

Every component instance produces React elements. React elements are created when JSX is converted into JavaScript using React.createElement(). In simple terms:

• JSX is syntax
• React element is the actual JavaScript object

Each React element describes what should appear in the UI.

React Element Tree and Virtual DOM

All React elements together form a React element tree. Many people also call this tree the Virtual DOM. This Virtual DOM plays a very important role in React because it allows React to:

• compare UI changes efficiently
• avoid unnecessary real DOM updates
• update only what is actually needed

React Rendering (What It Really Means)

Now let’s talk about rendering, which is often misunderstood. In React, rendering does NOT mean showing something on the screen. Rendering means React’s internal process of calculating UI changes.

When Rendering Is Triggered

Rendering is triggered mainly in two cases:

1. Initial Rendering – when we open a website and the UI appears for the first time.
2. State Update Rendering – when any state is updated inside a component.

This entire process happens inside React, not in the browser.

What Happens During Rendering

We already have a Virtual DOM tree. When a state update happens:

• React does not rebuild everything blindly.
• React re‑renders the part of the tree from where the state was updated.
• Only the affected component and its child components are re‑rendered; parent components are not re‑rendered unnecessarily.

After that, React compares the previous tree with the newly created tree. This comparison process is called reconciliation.

Fiber and Fiber Tree (Important Part)

Reconciliation is handled by React’s internal engine called Fiber. Fiber has its own structure called the Fiber Tree. Key points about the Fiber Tree:

• It is created once.
• It is not recreated again and again.
• It keeps getting updated over time.

The Fiber Tree looks different from the Virtual DOM tree, but it represents the same UI in a more optimized way.

Work‑In‑Progress Fiber Tree

When an update happens:

1. React creates a Work‑In‑Progress Fiber Tree.
2. Changes are applied to this new tree.
3. React prepares everything in the background.

Once the work is complete, the Work‑In‑Progress tree becomes the current Fiber Tree.

Commit Phase

After reconciliation is done, React moves to the Commit Phase. In this phase:

• Changes are applied to the real DOM.
• Updates become visible.

This whole process happens synchronously and is hidden from the developer.

Browser Rendering (After React Is Done)

After React finishes its work, the browser takes control. The browser decides layout, painting, and how things look on the screen. This is called browser paint, and it is not React’s responsibility.

Complete Flow (As I Understand It)

Component creation
 → Component instance
 → React elements
 → React element tree (Virtual DOM)
 → Rendering trigger
 → Re‑rendering
 → Reconciliation (Fiber)
 → Work‑In‑Progress Fiber Tree
 → Commit phase
 → Browser paint

Final Thoughts

I believe this explanation is much better than what I understood earlier. The most important realization for me is that React rendering is about recalculating UI, not directly updating the screen.

I’m still learning, but this mental model feels solid and practical, and it helps me understand:

• why re‑renders happen
• how React stays fast
• how updates actually reach the screen

This is my current understanding — and I’m confident it will evolve as I go deeper.