React Lifecycle Methods

React Components have their own structure and methods. They can be reusable as per the need. React Components divided into two types. They are

1. Functional Components
2. Class Components

What is a Functional Component?

In React, These are simply JavaScript functions. These functions may or may not receive data as parameters. In the functional Components, the return value is the JSX code to render to the DOM tree. ReactJS has access to a special hook called useState() that can be used for giving the illusion of working with the state in functional components. A valid functional component can be shown in the below example

function WelcomeMessage(props) {
 return <h1>Welcome to the , {props.name}</h1>;
}

What is Class Components?

Class components are more complex than functional components. It requires you to extend from React. Component and create a render function that returns a React element. You can pass data from one class to another class components. You can create a class by defining a class that extends Component and has a render function. The valid class component is shown in the below example.

class MyComponent extends React.Component {
 render() {
  return (
   <div>This is main component.</div>
  );
 }
}

What is the Lifecycle of Components?

In React version less than 16.3, Each component has a lifecycle that you can monitor and manipulate during its phases.

1. Initialization
2. Mounting
3. Updating
4. Unmounting

Lifecycle of Components

A)Initialization:- In this phase, The developer has to define the props and initial state of the component this is generally done in the constructor of the component.

b) Mounting:-After preparing with basic needs, state, and props, our React Component is ready to mount in the browser DOM. This phase gives hook methods for before and after the mounting of components. The methods which get called in this phase are

1. componentWillMount is executed just before the React Component is about to mount on the DOM. Hence, after this method the component will mount. All the things that you want to do before a component mounts have to be defined here. This method is executed once in a lifecycle of a component and before the first render.
2. render mounts the component onto the browser. This is a pure method, which means it gives the same output every time the same input is provided.
3. componentDidMount this is the hook method which is executed after the component did mount on the dom.
   This method is executed once in a lifecycle of a component and after the first render.

c) Update:-This phase starts when the react component has Set on the browser and grows by receiving new updates. The component can be updated in two ways, sending new props or updating the state. The following methods are called in this phase.

1. shouldComponentUpdate tells the React that when the component receives new props or state is being updated, should React re-render or it can skip rendering? This method is a question, should the Component be Updated? Hence this method should return true or false, and accordingly, the component would be re-rendered or skipped. By default, this method returns true. This method is generally used when rendering is a very heavy method, then you should avoid rendering every now and then.
2. componentWillUpdate is executed only after the shouldComponentUpdate returns true. This method is only used to do the preparation for the upcoming render, similar to componentWillMount or constructor.
   There can be some use case when there needs some calculation or preparation before rendering some item, this is the place to do so.
3. render And then the component gets rendered.
4. componentDidUpdate is executed when the newly updated component has been updated in the DOM. This method is used to re-trigger the third-party libraries used to make sure these libraries also update and reload themselves.

D) Unmounting:-In this phase, the component is not needed and the component will get unmounted from the DOM. The following methods are called in this phase.

1. componentWillUnmount This method is the last method in the lifecycle. This is executed just before the component gets removed from the DOM.

Note:-In React version 16.4, following Methods are Deprecated:-

1. componentWillMount()
2. componentWillReceiveProps()
3. componentWillUpdate()