Class based component — React

They are created using class keyword and by extending Component class from react.

class Profile extends React.Component {
   render(){  
      return <h1>Profile class component</h1>
   }
}

Then most important part of class based component is render method.
Use it in the same way as functional component and as well import is also the same.

How to use props?
In class based component we use ‘this’ keyword to get props and use it as this.props.

How to create state variable in class based component?

this.state = {
  count: 0,
}

Constructor method is the best place to create state variable.

How to create (lifecycle) constructor method?

constructor (props) {
  super(props)
}

State variables are used like this.state.count

How to change state variable in class based component?
this.setState({count: 1,}) — by passing modified object inside this.setState function

We can use destructuring in state and props for class based component.
React uses one big object to maintain the state variable.

What is the use of lifecycle methods in react?
Writing code in react using class based component require a deep understanding of how lifecycle method works in react.

React Lifecycle Keyword
Stage — Mounting, Updating, Unmounting.
Phase — Render and commit.
Lifecycle method — constructor, render, componentDidMount, componentDidUpdate and componentWillUnmount

Concept of lifecycle method — 
Mounting — 
 Render Phase — constructor, render
 Commit phase — react update dom and ref, componentDidMount
Update -
 Render Phase — render
 Commit phase — react update dom and ref, componentDidUpdate
Unmount — (only called when we leave the page unmounting the component from screen)
 Render Phase — 
 Commit Phase — componentWillUpdate

The above is like a work flow diagram which tells the journey of react based ui development.
A walkthrough — Let create a profile component and see its journey. When browser call for profile component:

— — — — — — — — — — — — — — Statge1-Mounting — — — — — — — — — — — — — —1. React start its search for constructor method in profile component and execute it.
2. Search for the render method and execute it.
— — — — — — — — — — — — — -Endofphase1-render— — — — — — — — — — — — —
1. It will update dom and refs.
2. Search for componentDidMount method and execute.
— — — — — — — — — — — — — -Endofphase2-commit — — — — — — — — — — — — —
— — — — — — — — — — — — — — Statge2-Updating — — — — — — — — — — — — — -— 1. React check search for change in state, forced update if found then proceed further
2. Search for the render method and execute it.
— — — — — — — — — — — — — -Endofphase1-render- — — — — — — — — — — — -
1. It will update dom and refs.
2. Search for componentDidUpdate method and execute.
— — — — — — — — — — — — — -Endofphase2-commit — — — — — — — — — — — — -
— — — — — — — — — — — — — — Statge2-Unmount — — — — — — — — — — — — — - —
— — — — — — — — — — — — — -Endofphase1-render- — — — — — — — — — — — -
1. Search for componentWillUnmount method and execute.
— — — — — — — — — — — — — -Endofphase2-commit — — — — — — — — — — — — -

Use cases of lifecycle methods.
Constructor — to set state.
Render — to render the data.
componentDidMount — to make api calls and can be used with async method
componentDidUpdate — to make api calls after state change
componentWillUnmount — to clean up. It is called when navigating to different page or to say unmounting the component from the screen.

Example of componentWillUnmount:
setInterval(()=>{}, [1000]);
It will always stay in the react application if once initiated because react is SPA it will not destroy the event.
We need to externally add the code for cleanup inside the componentWillUnmount to destroy such events same is true for hooks but there is a different way for cleanup.