I’m still learning React, but I feel my understanding of rendering is getting better with time.
This blog is my attempt to explain React rendering the way I understand it right now, in simple words.
I’m not trying to sound perfect I’m explaining this as a learner.
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
and 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().
So 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 of it, React is considered fast and modern.
The Virtual DOM 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:
Initial Rendering
When we open a website and the UI appears for the first time.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 things 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:
React creates a Work-In-Progress Fiber Tree
Changes are applied to this new tree
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 the commit 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
how things look on the screen
This is called browser paint, and this part is not React’s responsibility.
Complete Flow (As I Understand It)
This is the full flow in my head now:
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:
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
and how updates actually reach the screen
This is my current understanding — and I’m confident it will evolve as I go deeper.
Top comments (0)