What is "updating" in React?

Viewed 270

As React Documentation says:

componentDidUpdate() is invoked immediately after updating occurs

But I've noticed that componentDidUpdate() is invoked even a browser DOM element isn't updated.

So, what does the React Documentation mean by updating occurs?

4 Answers

"updating" is not DOM updates only but is part of the life cycle.
It occurs when there are new props, state updates and force updates

You can see this part in this diagram taken from the DOCS

enter image description here

componentDidUpdate is invoked when the render function within a component is called. This can happen when state or props changes. It can also happen when forceUpdate is called.

Sometimes, a component update may not trigger a DOM update. This is because React creates a virtual DOM after the update and checks with the virtual DOM before update. And only if there is a difference, the DOM is updated. In your case, probably, though the render function was triggered, there was no change in the virtual DOM and hence there was no DOM update.

The arguments of the componentDidUpdate should satisfy your query. The prevProps, prevState, snapshot are those data that gets updated from some other hooks. And at that time, you'll need componentDidUpdate to handle the update.

This picture should give you detailed information on updates:

enter image description here

So, you can see componentDidUpdate() is invoked immediately after updating occurs.

componentDidUpdate will run if there are any STATE, or PROP changes made to the component after the initial render, whether or not the change is effecting the DOM.

Related