Chapter 08: let’s get classy

1. you cann’t create a class based component using render method
2. get props using this.props, pass props as same as we do in functional based component
3. always use super(props) inside constructor
4. we do not mutate state directly if we do so it will not observed by react diff/reconciliation algorithm instead we use this.setState({ count: 1}) so that UI will be sync with data

Sequence of different life cycle method execute in class component

1. constructor
2. render
3. ComponentDidMount (it is best place to make API call)

Q1) order of life cycle method execute in class based component having child as well

1. parent constructor
2. parent render => it will invoke the child component and execute all life cycle method of child component before executing own(i.e parent) life cycle method
3. child constructor
4. child render
5. child componentDidMount
6. child all life cycle method
7. parent componentDidMount

React execute Component in 2 phase see above link

1. render pahse
   • execute constructor
   • execute render method
2. Commit phase
   • Actual Write in real DOM
   • other life cycle method like componentDidMount and run side effects i.e api call and schedule updates

Q2) order of life cycle method if parent has 2 child component in parallel

1. Parent Constructor
2. Parent Render
   • child 1 constructor
   • child 1 render
   • child 2 construcotor
   • child 2 render
   • ============DOM Updated for Children=========
   • child 1 componentDidMount
   • child2 componentDidMount
3. Parent ComponentDidMount

Q3) why you can not write callback function inside useEffect async but you can write async before componentDidMount to Make API call

========================

once we get data from api call and set the state with this data, it will again go in updating hence it will call render then it will call componentDidUpdate

if we go to other tag hence my current tab will be un-mount hence it will call componentWillUnmount

~~ understand the diagram

but never ever compare react life cycle method to functional component
useEffect not equivalent with componentDidMount

Cons of Single-Page Application

1. because it does not reload the page it is doesn’t clear things for last tab i.e setInterval, it will call setInterval even after going to other page and let’s say if we come page to same page it again start setInterval hence now 2 setInterval is calling together same way 3, 4, …. infinity setInterval may start calling and finally it will blow our app, here we will use componentWillUnmount to fix this issue i.e we willl use clearInterval inside componentWillUnmount

useEffect( () => {

console.log(‘useEffect’); // if we call setInterval() and not clear inside return function it will behave same way as discussed for class component

return () => { console.log(‘it will called on unmounting’)}

}, [])