React Rendering Basics

How React Renders

At its core, React’s job is to make sure your user interface (UI) always matches your application's data, or state. When the state changes, the UI should update to reflect that change. But how does React do this efficiently?

To understand React's magic, we first need to talk about the DOM, which stands for Document Object Model. Think of the DOM as the browser's internal representation of your webpage. It's a tree-like structure of all the HTML elements on the page. Changing what the user sees means changing this DOM tree.

Directly manipulating the real DOM is slow. Every time you add, remove, or update an element, the browser has to do a lot of work recalculating layouts and repainting the screen. Doing this frequently can make an application feel sluggish.

React solves this problem with a clever abstraction: the Virtual DOM.

The Virtual DOM

Instead of interacting directly with the browser's slow DOM, React works with a Virtual DOM (VDOM). The VDOM is a lightweight copy of the real DOM. It’s just a plain JavaScript object that describes what the UI should look like.

Because it’s just an object in memory, reading from and writing to the Virtual DOM is incredibly fast. It’s like having a blueprint of your house. It’s much faster to make changes to the blueprint than to start knocking down and rebuilding actual walls.

React uses a clever optimization called the Virtual DOM.

When you write a React component, you're not creating HTML elements directly. You're describing what you want to see, and React turns that description into a Virtual DOM object.

/* 
  This JSX... 
*/

const element = (
  <div className="greeting">
    <h1>Hello, world!</h1>
  </div>
);


/* 
  ...gets turned into a JavaScript object 
  like this (simplified) in the Virtual DOM.
*/

const virtualDOMElement = {
  type: 'div',
  props: {
    className: 'greeting',
    children: {
      type: 'h1',
      props: {
        children: 'Hello, world!'
      }
    }
  }
};

Reconciliation

So, what happens when your application's state changes? This is where the real power of the VDOM comes into play.

State Update: An event happens, like a user clicking a button, which updates the state of a component.
New VDOM: React creates a brand-new Virtual DOM tree that reflects the new state.
Diffing: React then compares this new VDOM tree with the previous one. This comparison process is called "diffing."
DOM Update: React calculates the most efficient way to make the real DOM match the new VDOM. It figures out the absolute minimum number of changes needed. Then, it "batches" these updates and applies them to the real DOM all at once.

This whole process is called reconciliation. By comparing VDOM trees and only updating what's necessary, React avoids slow, direct DOM manipulation and keeps your application fast and responsive.

What Triggers a Re-render?

In React, a component re-renders—meaning its rendering logic runs again—for two main reasons:

A change in its state
A change in the props it receives from a parent

When you call a state-updating function (like one returned by the useState Hook), you are signaling to React that the component's data has changed and it might need to look different. This is the primary way you make your UI interactive.

import { useState } from 'react';

function Counter() {
  // 1. 'count' state is initialized to 0
  const [count, setCount] = useState(0);

  function handleClick() {
    // 2. This call queues a re-render of the Counter component
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}

In the example above, every time the button is clicked, setCount is called. React then knows to re-render the Counter component with the new count value. It creates a new VDOM, sees that the text inside the <p> tag has changed, and updates only that specific part of the real DOM.

It's also important to know that when a parent component re-renders, it will also re-render all of its child components by default. This is how changes flow down through your application, ensuring the entire UI stays consistent.

React Performance Optimization Techniques