Suggest an edit

Improve this article

Refine the answer for “What is rendering in React?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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:

1. **Calls the component function** (or `render()` on a class component),
to **get a new tree of JSX elements**.
2. **Compares** the new tree with the previous one (through the **reconciliation algorithm**).
3. **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:

1. **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).
2. **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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts438 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.