Suggest an edit

Improve this article

Refine the answer for “How is the lifecycle related to the Virtual DOM?”. 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)

## Key idea

> **The Virtual DOM is the foundation** React uses to implement a **component's lifecycle.**

React does not work directly with the real DOM on every change.
Instead:

1. It builds a **virtual tree (Virtual DOM)**: JS objects describing the UI structure.
2. When state changes (`state`, `props`), React creates a **new version of the virtual tree**.
3. It compares it to the old version (the **reconciliation** process).
4. It computes the **minimal set of changes** to apply to the real DOM.
5. It applies them in the **commit phase**.

And every **lifecycle event** happens *around* these steps.

---

## How the Virtual DOM relates to lifecycle phases

Here is the connection, step by step:

| Stage | What React does with the Virtual DOM | Which methods / hooks are called |
|---|---|---|
| **Mount** | React creates the **first virtual tree** from JSX components | `useEffect` (after commit), `useLayoutEffect`, `componentDidMount` |
| **Update** | React creates a **new virtual tree**, compares it to the old one, finds differences (diffing) | `useEffect` (cleanup + new), `useLayoutEffect`, `componentDidUpdate` |
| **Unmount** | React removes the node from the virtual tree, removes the corresponding DOM elements | cleanup functions in `useEffect`, `componentWillUnmount` |

---

## Example: step by step

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

useEffect(() => {
    console.log('effect');
    return () => console.log('cleanup');
  });

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

1. **Mount**
  - React calls `Counter()`, creating a Virtual DOM for `<button>0</button>`.
  - There's nothing to compare against yet, so it creates the `<button>` DOM element.
  - After the commit, it calls `useEffect()`.

```javascript
  render -> diff -> commit -> useEffect
  ```
2. **Update (**`setCount`**)**
  - React calls `Counter()` again, producing a new Virtual DOM: `<button>1</button>`.
  - It compares the old (`<button>0</button>`) with the new (`<button>1</button>`) and sees a difference in the text.
  - It changes only the text in the DOM.
  - It runs the cleanup for the old effect, then the new `useEffect`.

```javascript
  render -> diff -> minimal DOM update -> cleanup -> new useEffect
  ```
3. **Unmount**
  - React removes the `Counter` Virtual DOM node.
  - It removes the `<button>` element from the DOM.
  - It calls the `cleanup()` from `useEffect`.

```javascript
  unmount -> cleanup -> remove DOM
  ```

---

## Connection to the Render and Commit phases

| Phase | Work with the Virtual DOM | Lifecycle |
|---|---|---|
| **Render phase** | React rebuilds the Virtual DOM (in memory) | The component's `render()`, reading state, computing JSX |
| **Commit phase** | React updates the real DOM based on the diff | `useLayoutEffect`, `useEffect`, `componentDidMount`, `componentDidUpdate`, cleanup |

---

## Key takeaway

> The Virtual DOM is the "workspace" where React decides **what needs to change**.
> The lifecycle is the "timeline" of **when** those changes happen and **when you can hook into** that process.

---

## Visually

```javascript
  (state changed)
          ↓
    ┌──────────────┐
    │ Render phase │  ← build a new Virtual DOM
    └──────────────┘
          ↓
    compare with the previous one (diffing)
          ↓
    ┌──────────────┐
    │ Commit phase │  ← update the real DOM
    └──────────────┘
          ↓
     call useEffect()
```

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.