Using ComponentDidUpdate

Question

I am trying to understand class based components in react. I came across these lifecycle methods. I just wanted to understand a little but about componentDidUpdate()

From what I understand, the react component will only re-render in case this.setState was called. So Ideally componentDidUpdate will be called only whenever there is some setState triggered ?

Also, please correct me on my understanding as mentioned below:

componentDidUpdate() is different from useEffect() because useEffect automatically re-renders if any of the elements of dependency array are changed, but componentDidUpdate may never trigger a rendering on its own (unless we call this.setState() inside it)

Thanks

• KcH: Does this answer your question? When to use 'componentDidUpdate' method?

Answer 1

From what I understand, the react component will only re-render in case this.setState was called. So Ideally componentDidUpdate will be called only whenever there is some setState triggered?

Not exactly. Components rerender when state and/or props update (just look at the function signature of componentDidUpdate(prevProps, prevState) where it is passed the state and props value from the previous render cycle), or when the parent component rerenders.

componentDidUpdate() is different from useEffect() because useEffect automatically re-renders if any of the elements of dependency array are changed, but componentDidUpdate may never trigger a rendering on its own (unless we call this.setState() inside it)

Again, not exactly. The useEffect hook is run each time the component is rendered, and only if a dependency updated will the callback be invoked. With componentDidUpdate the method will be called when one of state or props is updated, or the parent component rerenders, so basically any time the component is rerendered. Instead of having a dependency update to trigger an effect you must manually compare the previous state/props value to the current state/props value.

Example:

componentDidUpdate(prevProps) {
 if (prevProps.propA !== this.props.prop!) {
 // ... do effect
 }
}

The biggest difference between componentDidUpdate and useEffect is that useEffect is effectively both componentDidMount and componentDidUpdate.

Answer 2

So Ideally componentDidUpdate will be called only whenever there is some setState triggered ? Yes, you are right. componentDidUpdate() is invoked immediately after a component is updated or state changes. However, this method is not called for the initial render.

 componentDidUpdate(prevProps, prevState)
 prevProps: previous props before the update
 prevState: previous state before the update
 
 Real Example: Suppose you are implementing an autosave feature. After a user inputs something, we want to save the input by uploading it.
 Upon entering, user input changes the component state or, in other words, the component is updated, so, we can make the request using componentDidUpdate().
 useEffect(()=>{
 //requests
 },[state]);
Above React hook call in initial as well as on this state changes.
componentDidUpdate(prevProps) {
//Typical usage (don't forget to compare props)
 if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);}}

You may call setState() immediately in componentDidUpdate() but note that it must be wrapped in a condition like in the example above, or you’ll cause an infinite loop.

 https://www.educative.io/edpresso/what-is-react-componentdidupdate

• Community: As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.