React Mastery Series – Day 8: Understanding React Rendering & Component Lifecycle

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

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>
  );
}

The flow:

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

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);

When state changes:

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

---

2. Props Change

Example:

<User name="Siva" />

If the parent changes:

<User name="John" />

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 />
    </>
  );
}

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);

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>
  );
}

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>

After state update:

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

React compares both trees.

It identifies:

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

Only that part of the DOM is updated.

---

Functional Components and Lifecycle

Class components had lifecycle methods like:

componentDidMount()

componentDidUpdate()

componentWillUnmount()

Functional components use Hooks to handle lifecycle behavior.

The main Hook for lifecycle operations is:

useEffect()

Example:

useEffect(() => {

  console.log("Component mounted");

}, []);

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

---

1. Mounting

The component is created and added to the DOM.

Example:

Opening a dashboard page:

Dashboard Component Created
        |
        ↓
API Call
        |
        ↓
Display Data

Common use cases:

• Fetch initial data
• Subscribe to services
• Initialize values

Example:

useEffect(() => {

  fetchUsers();

}, []);

---

2. Updating

A component updates when:

• State changes
• Props change
• Context changes

Example:

setCount(count + 1);

Flow:

State Change
      |
      ↓
Render
      |
      ↓
DOM Update

---

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);
  };

}, []);

---

Does Every Render Update the DOM?

No.

This is a common misunderstanding.

Example:

function Counter() {

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

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

}

When state changes:

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

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

---

React Re-render

Only React components execute again.

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

The browser page does not reload.

---

Common Rendering Mistakes

Changing State During Rendering

Incorrect:

function App(){

setCount(1);

return <h1>Hello</h1>;

}

This creates an infinite rendering loop.

---

Creating Unnecessary State

Avoid:

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

when it can be calculated:

const fullName =
firstName + lastName;

---

Large Components

Large components create more expensive renders.

Prefer:

Small Components
        +
Composition
        =
Better Performance

---

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

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! 🚀