What does componentDidUpdate() do?

ReactJunior~2 min read

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

The component received new props or its state changed.
React calls render().
React updates the DOM.
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

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 });
}

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.

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.

Short Answer

Interview ready

Premium

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