What is rendering in React?

ReactJunior~2 min read

Rendering in React is the process by which React creates and updates the tree of UI elements (Virtual DOM) based on components' state and props, and then synchronizes it with the browser's real DOM.

Put simply:

When something changes (for example, a component's state), React:

Calls the component function (or render() on a class component), to get a new tree of JSX elements.
Compares the new tree with the previous one (through the reconciliation algorithm).
Determines the differences (diff) and minimally updates the DOM to reflect the changes on screen.

Two key stages of rendering:

React 18 and above use the Fiber architecture, in which the process is split into two phases:

Render phase (computation / preparation phase) React calls the components, builds a new virtual tree, compares it with the old one, and decides what needs to be updated. This phase can be interrupted (in concurrent rendering).
Commit phase (application phase) React applies all the found changes to the real DOM. At this stage, hooks like useLayoutEffect and useEffect are called.

When rendering happens:

A component re-renders when:

Its state changes (setState, useState).
Its props change (the parent passed new data).
The context changes (useContext).
The parent re-renders (if the child is not memoized with React.memo).

Types of rendering:

Type	What it does	Example
Initial render	The first display of a component	on page load
Re-render	A repeated render due to a state or props update	on `setState()`
Server-side rendering (SSR)	Generating HTML on the server (Next.js, Remix)	improves SEO
Static rendering (SSG)	Generating HTML at build time	used in Next.js
Client-side rendering (CSR)	Generating the UI entirely in the browser	standard React

Important:

Rendering does not always mean updating the DOM - if React sees that the result did not change, it does not touch the DOM (optimization).
Render ≠ painted on screen. React may call the component, but update the DOM later (or not update it at all, if the result did not change).

Example:

javascript

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

  console.log('Rendering!');

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

Every time the button is clicked:

setCount is called.
React re-renders the component (console.log fires).
React compares the new tree with the previous one.
Only the text <p>Count: ...> in the DOM changes.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

What is rendering in React?

#Put simply:

#Two key stages of rendering:

#When rendering happens:

#Types of rendering:

#Important:

#Example: