Cheatsheet to React Lifecycle hooks Part-2
Tags: react, webdev, javascript
Published: 2020-10-22 16:02:46

Hey there, hopefully, you've read the first part of the series and if not go and <a href="https://dev.to/lakshyabatman/cheatsheet-to-react-lifecycle-hooks-part-1-597d">read</a>.

So, now we're discussing ** Update lifecycle hooks on props and state change.** 
So, let's point out in what ways you can update a component,
- Change state 
- Change prop

So react provides several hooks which can be accessed to handle these changes, so we're going to discuss each of them one by one.

<img src="https://media.giphy.com/media/CjmvTCZf2U3p09Cn0h/source.gif" width="200px"></img>

- **getDerivedStateFromProps**, as discussed in <a href="https://dev.to/lakshyabatman/cheatsheet-to-react-lifecycle-hooks-part-1-597d">Part-1</a>, this hook runs in both mounting and updating cycle, and it takes `props and state` as the arguments so the developer can update state according to change in props and most importantly it should return an object to update the state, or null to update nothing also make sure not to do `side-effects` here.

```javascript
static getDerviedStateFromProps(props,state) {
 //update the state if required 
 return state //or null
}
```

- **shouldComponentUpdate**, so here is a great hook that we can utilise to improve performance of our application, let's say we props get updated but we don't want to re-render the component for some reasons, so here we can utilise this hook and return a boolean `true to continue updating, false to abort`, this way we can reduce unnecessary re-rendering thus improving performance. Also, don't do `side-effects` here.

Also, interesting takeaway, the `nextState` comes from the `getDerviedStateFromProps` method.

```javascript
shouldComponentUpdate(nextProps, nextState) {
 if(/*Some checks*/) {
   return true
  }
return false
}
```
- **render**, as we discussed we know what we're gonna do here **Prepare your JSX**.

```javascript
render() {
  return <div>I love React</div>
}
```
- **Update child components**, nothing here.

- **getSnapshotBeforeUpdate**, this is an interesting hook, here we get last-minute snapshot of the component before the update, which means previous props and state which are passed as arguments in it so that we can do some computation if required. A snapshot value (or null) should be returned.
The best use case is we can use it to store user position in an application, so after the update, we can scroll it to that position automatically hence improving user experience.
Still not a goot place for side effects.
```javascript
getSnapshotBeforeUpdate(prevProps, prevState) {
  // Code here 
}
```
- **componentDidUpdate**, reaching the end, this is the best time for side-effects because our application is updated and we do anything we want.
Protip: Try to keep side-effects async, so it won't mess up with react lifecycle. Also, don't update the state here, it'll cause re-render.

```javascript
componentDidUpdate(prevProps, prevState, snapshot) {
   
}
```
**What about when the component unmounts or get destroyed?**
Here we can use `componentWillUnmount`, this will be executed just before the component is unmounted and this is best for cleanup work,**don't update state here cause it'll never be re-render**.

<img src="https://media.giphy.com/media/j1Xyt3DHfJcmk/source.gif"</img>

Here it is the end of part 2, hope you enjoyed it! I'm extremely tired so will write part 3 later. Anyway happy coding! Please like and follow <3 it'll motivate me.