Suggest an edit

Improve this article

Refine the answer for “What does componentDidUpdate() do?”. 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)

## Definition

> `componentDidUpdate(prevProps, prevState, snapshot)`
> is called **after the component updates** (that is, after `render()` and after the changes have already been applied to the DOM).

---

## When it is called

The method is called **on every re-render**, except the first one (mounting):

1. The component received new `props` or its `state` changed.
2. React calls `render()`.
3. React updates the DOM.
4. **React calls** `componentDidUpdate()`.

---

## Method signature

```javascript
componentDidUpdate(prevProps, prevState, snapshot) {
  // your code
}
```

| Parameter | Meaning |
|---|---|
| `prevProps` | Previous props |
| `prevState` | Previous state |
| `snapshot` | The result of `getSnapshotBeforeUpdate()` (if it exists) |

---

## Example

```javascript
class Example extends React.Component {
  state = { count: 0 };

componentDidUpdate(prevProps, prevState) {
    // Check whether count changed
    if (prevState.count !== this.state.count) {
      console.log('count changed:', this.state.count);
      document.title = `Count: ${this.state.count}`;
    }
  }

render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        {this.state.count}
      </button>
    );
  }
}
```

**How it works:**

- On the first render, `componentDidUpdate` is **not called**.
- On every `setState` → after the DOM updates, `componentDidUpdate` is called.
- We compare `prevState` and `this.state` so we don't run the effect for nothing.

---

## Important rules

1. **Do not call** `setState` **without a condition inside** `componentDidUpdate()`**!**
Otherwise you get an infinite loop:

```javascript
  componentDidUpdate() {
    this.setState({ count: 1 }); // triggers an update again and again
  }
  ```
Only do it behind a check:

```javascript
  if (prevState.count !== this.state.count) {
    this.setState({ doubled: this.state.count * 2 });
  }
  ```
2. **It is called after the commit phase** - that is, when the DOM is already updated.
So you can:
  - Measure element sizes.
  - Work with the DOM API.
  - Make network requests based on the new data.
  - Trigger animations.
3. **The analog in function components** is `useEffect()`

```javascript
  useEffect(() => {
    console.log('analog of componentDidUpdate');
  });
  ```
If you want the effect to run **only when a specific value changes**, add dependencies:

```javascript
  useEffect(() => {
    console.log('count changed');
  }, [count]);
  ```

---

## Typical use cases

| Task | Example |
|---|---|
| Reacting to props/state changes | Restart a timer when props change |
| Syncing with external APIs | Update data on the server when the state changes |
| Measuring the DOM | Get an element's size after an update |
| Animation | Trigger an animation after data changes |

---

## Comparison with other methods

| Method | When it is called | Main purpose |
|---|---|---|
| `componentDidMount()` | After the first render | Initialization, requests |
| `componentDidUpdate()` | After every update | Reacting to changes |
| `componentWillUnmount()` | Before removal from the DOM | Cleaning up resources |

---

## Summary

> `componentDidUpdate()` is the moment when **the DOM is already updated**, and you can safely perform any **side effects** that react to changes in `props` or `state`.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.