Cheatsheet to React Lifecycle hooks Part-1
Tags: react, javascript, webdev
Published: 2020-10-22 13:31:40

I know this is the topic you can find anywhere so what's the point of writing it again?
What if I tell you this is the only post or article you would need to understand react lifecycle hooks and for revision as well.

So, here is the backstory I need to brush my knowledge in React and I started revising lifecycle so I thought I should write a blog and if I need to come back to something I can just look over it.

So, I'm writing 3 part tutorials on React lifecycle hooks.
- **Component creation hooks in class-based components** 
- **Component update hooks on props and state change in class-based components** <a href="https://dev.to/lakshyabatman/cheatsheet-to-react-lifecycle-hooks-part-2-l1b">Link</a>
- **React hooks in functional components** <a href="https://dev.to/lakshyabatman/cheatsheet-to-react-lifecycle-hooks-part-3-3cg0">Link</a>

## What is React lifecycle hooks?:

So every react component goes through a lifecycle(creation, rendering, updating) and react emits certain methods which can be overloaded, so we can(as a developer) use it for anything(Spoiler: with some restrictions).

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

As in every other tutorial, I'll show you this cool flow diagram! :D 

<img src="https://cdn-images-1.medium.com/max/1600/1*u8hTumGAPQMYZIvfgQMfPA.jpeg"></img>

This is lifecycle flow for a class component (yes, now functional components have lifecycle hooks as well `npm update react` please.)


Before diving, 
> Side effects are methods which have no relation with the application as it calls 3rd party libraries or API which lives outside the application ecosystem. 


## Component creation
So, when a component is created it goes through some phases including `constructor` to `ComponentDidMount` and we'll be discussing every method in detail and what kind of action you should take in it. Bear with me :D

- First `constructor` is called, it takes props as its argument and injects it to the component.
  - **Do**: Prepare state, according to props if you want so.
  - **Don't**: Side Effects or anything which might take the time or fail as it'll mess up with the application or impacts performance.

- Then, `getDerivedStateFromProps` is called, this is called whenever props are changed, so it exists both in **creation and update cycle**, as it's doesn't depend on the component instance we use `static` before it (i.e `static getDerivedStateFromProps`). It should return an object to update the state, or null to update nothing.
  - **Do**: Sync your state according to props.
  - **Don't**: Side effects

- Now `render` method is called, and this is the method which returns JSX so what you should do in it? Structure your JSX nothing else!

- Now Childs Components are rendered! The same cycle is followed in children and so on.

- Now `ComponentDidMount` is called, everything is done! Congratulations! Now you can call side effects but don't update state it'll re-render the component.

That's pretty it! Hope you enjoyed it :D, please like and add me up on Twitter and Linkedin it does motivate me a lot. Ps: I need motivation these days :')

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

**References:**
- <a href="https://reactjs.org/docs/state-and-lifecycle.html">React Docs</a>