How React Renders and Re-renders Components

React is responsible for rendering your components into the browser. We write components that describe how a piece of UI should look and behave based on the props (inputs) and state it receives. React then figures out how these components map to the real DOM.

<Welcome />  →  React (Rendering)  →  Browser DOM

Under the Hood: How React Creates Elements

When React processes your components, it doesn’t immediately touch the DOM. Instead, it first creates an element definition: an object that describes the UI.

For example:

<h1 name="BOB">Hello</h1>

Internally, React turns this into something like:

{
  type: "h1",
  props: { name: "BOB", children: "Hello" },
  key: null,
  ref: null
}

If the type is a custom component instead of a string, React recursively processes that component until it eventually resolves into native DOM elements.

Example: Custom Component

function Welcome({ name }) {
  return <h1>Hello {name}</h1>;
}

<Welcome name="Alice" />

Element definition:

{
  type: Welcome,
  props: { name: "Alice" }
}

React will call Welcome(props) → returns <h1>Hello Alice</h1> → which eventually becomes the DOM node.

At the end of this process, React has a tree of objects (a big JSON-like structure) representing the current UI.

When Does React Re-render?

If React never re-rendered, your app would just be a static page.

The usual trigger

React re-renders when state or props change.

Example

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

Clicking the button updates state → causes a re-render → React updates only the text node showing the count.

But there’s more…

Even if props don’t change, a component may re-render if its parent re-renders.

Example

function Child() {
  console.log("Child re-rendered");
  return <p>Child</p>;
}

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child />
    </>
  );
}

• When you click the button, Parent re-renders because its state changed.
• React then re-renders Child too, even though no props were passed to it.

This happens because React assumes components are impure (they might rely on external data like API calls, dates, or context). So, to be safe, React re-renders children too.

Optimization: Virtual DOM & Reconciliation

Even if React calls your components many times, it doesn’t mean it recreates the DOM from scratch.

React uses the Virtual DOM (an in-memory representation of the UI) and a process called Reconciliation to update only what’s necessary.

Think of it as React doing “surgical updates” to the real DOM.

Pure Components & React.memo

If a component should only re-render when its props change, you can wrap it in React.memo:

const Child = React.memo(function Child({ value }) {
  console.log("Child rendered");
  return <p>{value}</p>;
});

Now, if the parent re-renders without changing value, Child won’t re-render.

Reconciliation: Rules of React’s Diffing Algorithm

When React compares the old Virtual DOM with the new one, it follows some rules:

1. Different Types → Replace Entire Subtree

React sees div → span (different type) → throws away the old tree and builds a new one.

2. Same Type (DOM elements) → Update Attributes

React keeps the same <h1> node but updates the className.

3. Same Type (Components) → Reuse Instance

React keeps the same Welcome component instance, just calls it again with new props.

4. Lists & Keys

When rendering lists, React compares children by keys.

// Before
<ul>
  <li key="1">Alice</li>
  <li key="2">Bob</li>
</ul>

// After
<ul>
  <li key="2">Bob</li>
  <li key="1">Alice</li>
</ul>

Without key, React would destroy and recreate both items. With keys, React knows the items just swapped places.

Summary

• React turns components into element definitions before touching the DOM.
• Re-renders happen when state/props change, or when parents re-render.
• React uses the Virtual DOM + Reconciliation to minimize real DOM updates.
• React.memo helps avoid unnecessary re-renders.
• Reconciliation follows simple rules: type changes → rebuild, same type → update, lists → compare by keys.