CODEWITHSUNDEEP
reactjs
Amit Gupta
Amit Gupta

Reputation: 127

Using ComponentDidUpdate

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

Upvotes: 1

Views: 4387

Answers (2)

tirth1620
tirth1620

Reputation: 154

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

Upvotes: 0

Drew Reese
Drew Reese

Reputation: 202696

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.

Upvotes: 4

Related Questions