Welcome back to the React Mastery Series!

In the previous article, we learned about State in React and how state changes make our applications interactive.

Today, we will understand one of the most important concepts for every React developer:

How does React render components?

Many developers know how to write React code, but understanding when and why React renders is what separates a beginner from an advanced React developer.

A strong understanding of rendering helps you:

  • Build faster applications
  • Avoid unnecessary re-renders
  • Debug performance issues
  • Use optimization techniques correctly

Let's dive in.

What is Rendering in React?

Rendering is the process where React:

  1. Takes your component code
  2. Creates a representation of the UI
  3. Updates the browser DOM when necessary

A simple way to visualize it:

Component Code
       |
       ↓
React creates Element Tree
       |
       ↓
Reconciliation Process
       |
       ↓
Browser DOM Update

Enter fullscreen mode Exit fullscreen mode

Rendering does not always mean updating the browser DOM.

React may render a component, compare the result, and decide that no DOM changes are required.

Initial Render

When a React application starts, the first rendering process happens.

Example:

function App() {
  return (
    <h1>
      Hello React
    </h1>
  );
}

Enter fullscreen mode Exit fullscreen mode

The flow:

index.html
    |
    ↓
main.tsx
    |
    ↓
<App />
    |
    ↓
React creates UI
    |
    ↓
Browser displays content

Enter fullscreen mode Exit fullscreen mode

This is called the initial render.

What Causes a Re-render?

A component re-renders when:

1. State Changes

Example:

const [count, setCount] = useState(0);

setCount(1);

Enter fullscreen mode Exit fullscreen mode

When state changes:

State Update
     |
     ↓
Component Re-renders
     |
     ↓
UI Updates

Enter fullscreen mode Exit fullscreen mode

2. Props Change

Example:

<User name="Siva" />

Enter fullscreen mode Exit fullscreen mode

If the parent changes:

<User name="John" />

Enter fullscreen mode Exit fullscreen mode

The child component receives new props and re-renders.

3. Parent Component Re-renders

When a parent component renders, React also re-renders its children by default.

Example:

function Parent() {

  return (
    <>
      <Child />
    </>
  );
}

Enter fullscreen mode Exit fullscreen mode

If Parent updates, Child also gets rendered again.

Later, we will learn how React.memo can prevent unnecessary child renders.

4. Context Value Changes

When a component consumes Context:

const user = useContext(UserContext);

Enter fullscreen mode Exit fullscreen mode

If the context value changes, the component re-renders.

Understanding the Render Phase

React rendering happens in two major phases:

Phase 1: Render Phase

React calculates what the UI should look like.

During this phase:

  • Components execute
  • JSX is created
  • Virtual DOM is generated

Example:

function Profile() {

  console.log("Rendering Profile");

  return (
    <h1>
      Profile
    </h1>
  );
}

Enter fullscreen mode Exit fullscreen mode

Every time the component renders, this function executes again.

Phase 2: Commit Phase

React compares the new Virtual DOM with the previous one.

This process is called:

Reconciliation

React identifies:

  • What changed?
  • What stayed the same?
  • What needs updating?

Then React updates the actual DOM.

Virtual DOM and Reconciliation

Example:

Before:

<ul>
  <li>React</li>
  <li>Angular</li>
</ul>

Enter fullscreen mode Exit fullscreen mode

After state update:

<ul>
  <li>React</li>
  <li>Angular</li>
  <li>Vue</li>
</ul>

Enter fullscreen mode Exit fullscreen mode

React compares both trees.

It identifies:

New Item Added:
<li>Vue</li>

Enter fullscreen mode Exit fullscreen mode

Only that part of the DOM is updated.

Functional Components and Lifecycle

Class components had lifecycle methods like:

componentDidMount()

componentDidUpdate()

componentWillUnmount()

Enter fullscreen mode Exit fullscreen mode

Functional components use Hooks to handle lifecycle behavior.

The main Hook for lifecycle operations is:

useEffect()

Enter fullscreen mode Exit fullscreen mode

Example:

useEffect(() => {

  console.log("Component mounted");

}, []);

Enter fullscreen mode Exit fullscreen mode

The empty dependency array means:

"Run this effect only after the first render."

Component Lifecycle Stages

A React component generally has three stages:

Mounting
   |
   ↓
Updating
   |
   ↓
Unmounting

Enter fullscreen mode Exit fullscreen mode

1. Mounting

The component is created and added to the DOM.

Example:

Opening a dashboard page:

Dashboard Component Created
        |
        ↓
API Call
        |
        ↓
Display Data

Enter fullscreen mode Exit fullscreen mode

Common use cases:

  • Fetch initial data
  • Subscribe to services
  • Initialize values

Example:

useEffect(() => {

  fetchUsers();

}, []);

Enter fullscreen mode Exit fullscreen mode

2. Updating

A component updates when:

  • State changes
  • Props change
  • Context changes

Example:

setCount(count + 1);

Enter fullscreen mode Exit fullscreen mode

Flow:

State Change
      |
      ↓
Render
      |
      ↓
DOM Update

Enter fullscreen mode Exit fullscreen mode

3. Unmounting

A component is removed from the DOM.

Example:

User navigates away from a page.

Common cleanup tasks:

  • Remove event listeners
  • Cancel subscriptions
  • Clear timers
  • Close WebSocket connections

Example:

useEffect(() => {

  const timer = setInterval(() => {
    console.log("Running");
  }, 1000);


  return () => {
    clearInterval(timer);
  };

}, []);

Enter fullscreen mode Exit fullscreen mode

Does Every Render Update the DOM?

No.

This is a common misunderstanding.

Example:

function Counter() {

const [count,setCount] = useState(0);

return (
<h1>{count}</h1>
);

}

Enter fullscreen mode Exit fullscreen mode

When state changes:

State Update
      |
      ↓
React Render
      |
      ↓
Compare Virtual DOM
      |
      ↓
Update Only Changed DOM

Enter fullscreen mode Exit fullscreen mode

React avoids unnecessary DOM operations.

Understanding Re-render vs Refresh

These are different concepts.

Browser Refresh

Entire application reloads.

Browser
   |
   ↓
Download JS
   |
   ↓
Start React App Again

Enter fullscreen mode Exit fullscreen mode

React Re-render

Only React components execute again.

State Change
     |
     ↓
Component Function Executes
     |
     ↓
React Updates UI

Enter fullscreen mode Exit fullscreen mode

The browser page does not reload.

Common Rendering Mistakes

Changing State During Rendering

Incorrect:

function App(){

setCount(1);

return <h1>Hello</h1>;

}

Enter fullscreen mode Exit fullscreen mode

This creates an infinite rendering loop.

Creating Unnecessary State

Avoid:

const [fullName,setFullName] =
useState("");

Enter fullscreen mode Exit fullscreen mode

when it can be calculated:

const fullName =
firstName + lastName;

Enter fullscreen mode Exit fullscreen mode

Large Components

Large components create more expensive renders.

Prefer:

Small Components
        +
Composition
        =
Better Performance

Enter fullscreen mode Exit fullscreen mode

Real-World Example: Banking Application

Imagine a transaction dashboard.

User completes a payment:

Payment Completed
        |
        ↓
Update Transaction State
        |
        ↓
Transaction Component Re-renders
        |
        ↓
React Calculates Changes
        |
        ↓
Only Transaction List Updates

Enter fullscreen mode Exit fullscreen mode

The entire application does not reload.

This is why React applications feel fast and responsive.

Key Takeaways

Today, we learned:

✅ Rendering is React's process of creating and updating UI.
✅ State, props, and context changes trigger renders.
✅ Rendering does not always mean DOM updates.
✅ React uses reconciliation to efficiently update the DOM.
✅ Functional components use Hooks for lifecycle behavior.
✅ Understanding rendering is essential for React performance optimization.

Coming Next 🚀

In Day 9, we will learn:

Event Handling in React – Making Applications Interactive

We will cover:

  • Handling click events
  • Passing arguments to events
  • Synthetic events
  • Forms and controlled components
  • Preventing default behavior
  • Event propagation
  • Real-world examples

By mastering events, you will learn how React applications respond to user actions.

Happy Coding! 🚀