Understanding React Rendering:

What is Rendering in React?

Rendering is the process where React converts your components into elements that the browser can display. Whenever the state or props of a component change, React re-renders the component to reflect the latest data.

Example:

function App() {
  const name = "Arul";

  return (
    <div>
      <h1>Hello, {name}</h1>
    </div>
  );
}

React renders the App component and displays:

Hello, Arul

Types of Rendering in React :

1. Initial Rendering:

This happens when a React application loads for the first time.

import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(
  document.getElementById("root")
);

root.render(<App />);

React creates the component tree and displays it on the page.

2. Re-Rendering

A component re-renders when:

• State changes
• Props change
• Parent component re-renders
• Context value changes

Example:

import { useState } from "react";

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

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

When the button is clicked, React updates the state and re-renders the component.

React Virtual DOM

React uses a Virtual DOM to improve performance.

How It Works

• State changes.
• React creates a new Virtual DOM.
• React compares it with the previous Virtual DOM.
• Only the changed elements are updated in the real DOM.

This process is called Reconciliation.

State Change
      ↓
Virtual DOM Update
      ↓
Compare Changes
      ↓
Update Real DOM

Reconciliation in React

Reconciliation is React's algorithm for determining what has changed in the UI.

Example:

function Greeting({ isLoggedIn }) {
  return (
    <h1>
      {isLoggedIn ? "Welcome Back!" : "Please Login"}
    </h1>
  );
}

React updates only the text inside the

instead of rebuilding the entire page.

Why Components Re-Render

Consider this example:

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

  return (
    <>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <Child />
    </>
  );
}

function Child() {
  console.log("Child Rendered");

  return <h2>Child Component</h2>;
}

Every time the button is clicked, both Parent and Child re-render.

Preventing Unnecessary Re-Renders:

Using React.memo :

import React from "react";

const Child = React.memo(() => {
  console.log("Child Rendered");

  return <h2>Child Component</h2>;
});

export default Child;

Now the child component only re-renders when its props change.

Using useMemo:

import { useMemo } from "react";

const expensiveValue = useMemo(() => {
  return calculateValue();
}, []);

useMemo stores a computed value and recalculates it only when dependencies change.

Using useCallback:

import { useCallback } from "react";

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

useCallback prevents function recreation on every render.

React Rendering Lifecycle:

Component Mounts
       ↓
Initial Render
       ↓
State/Props Change
       ↓
Re-Render
       ↓
Virtual DOM Comparison
       ↓
DOM Update