main diagram whole Blog moving around this

link for this diagram

class & functional components

• Passing props

state in class (all the states stored in one object like profileClass.js)

how to set state

class lifecycle

constructor

render

componentDidMount (best way to make api calls)

and what if there are two children in the component?

Like this

let's understand

there are two-phase

1. render phase

2. 

   commit phase

3. 

When we use async functions like api call

ComponentDidUpdate

Important

1. in-class base components, react calls componentDidMount and every subsequent rerender react will call componentDidUpdate

is like - mount - update - unmount

1. in-function based components, react call useEffect only once when site lodes (refresh)

dependency array in class components

But thanks to react now we don't have to make our changes refresh like this anymore, now in functional components, we are using useEffect with dependencies array like this.

componentWillUnmount

it is called when we leave the current page because we need to clear things up.

cons of using a single page application (SSP) 😂

if you make a setTimeOut in a class component / componentDidMount, it is called even after you leave the page,

now here is the scary part of that when you return once again on the same component the setTimeOut calls itself twice like 2-4-6-8-10 (basically it started two intervals automatically)

why does this happen?

because in SSP pages are not reloaded react just changes components not refresh at all, this is the main superpower of React but it is also a pain when it comes to class-based components. So is this a boon or bane 😂

pay attention to line number 17 & 34

How will will clean things up in functional component useEffect like cpmponentWillUnmount:

• normal code without cleanup

• code with cleanup

Question: tell me the order of console.log statements printed on console.

Answer:

and after you leave your page the return will called.

so now you must understand how to clean your useEffect (using return)

#namasteReact thankyou Akshay Saini bhaiyaa

Sameer Faridi

Connect with me on LinkedIn

Take a look at my work on GitHub

My resume

I am currently looking for a job opportunity.