Knowing the Lifecycle method can be very handy not only in the development lifecycle but also in Interviews.

Generally, Life Cycles method exist in class-based component but, you can also use them in function-based component also by the help of react Hooks.

These are the things happen from top to bottom when your react component runs.

Here is the sandBox link To see LifeCycle Methods in action

The above LifeCycle Method is from the creation phase when your react component is rendered the first time

and these lifecycle method runs in update phase,means when something is updating in your react tree

useEffect LifeCycle Method

ComponentDidMount

Good for making network calls and things you want to do at start time of app

useEffect(() => {
  /* ComponentDidMount code */
}, []);

ComponentDidUpdate

Update thing when new props comes

useEffect(() => {
  /* componentDidUpdate code */
}, [var1, var2]);

ComponentWillUnmount

use for cleanUp

useEffect(() => {
  return () => {
   /* componentWillUnmount code */
  }
}, []);

All Three Combined

useEffect(() => {

  /* componentDidMount code + componentDidUpdate code */

  return () => {
   /* componentWillUnmount code */
  }
}, [var1, var2]);

Reference: Academind

What do you think about these LifeCycles Methods ??