ReactJS | Lifecycle of Components

ReactJS | Lifecycle of Components

Every component creation process in ReactJS uses different lifecycle techniques. These processes are referred to as component lifecycles. These straightforward lifecycle methods are used several times throughout the lifespan of a component. 

To learn more about ReactJs you can visit Tutorials Freak, this platform is created for all those people who want to grow and learn to excel in their careers. Tutorials Freak provides in-depth knowledge about all topics of Reactjs tutorial for free and all the content is created in a structured format.

There are four phases in the component's lifecycle. As follows:

1. Initial Phase
2. Mounting Phase
3. Updating Phase
4. Unmounting Phase

Each phase includes a few lifecycle techniques that are unique to that phase. Let's go over each of these stages individually.

1. Initial Phase

It is the beginning of a ReactJS component's lifecycle. The component begins its journey toward the DOM from this point. A component has its initial State and default Props during this phase. The function Object() { [native code] } of a component is where these default properties are set. The first stage only happens once and entails the following techniques.

getDefaultProps()

It is used to specify this. props' default value. It is called before the component is created or any parent-provided props are passed to it.

getInitialState()

It is used to specify this. state's default value. Prior to the creation of the component, it is called.

2. Mounting Phase

A component instance is created and added to the DOM during this stage. It includes the following techniques.

componentWillMount()

Prior to a component being rendered into the DOM, this is called. If this is the case, the component won't re-render when setState() is called inside of this method.

componentDidMount()

This is used as soon as a component is rendered and added to the DOM. Any DOM querying operations are now available.

render()

The components of this method are all defined. A single root HTML node element must be returned by it. Return a null or false value if you don't want to render anything.

3. Updating Phase

It is the following stage of a react component's lifecycle. Here, we change the State and receive new Props. In this stage, it is also possible to manage user interaction and establish communication with the hierarchy of component parts. Making sure the component is showing the most recent version of itself is the primary goal of this stage. This phase, as opposed to the Birth or Death phases, is perpetual. The methods used in this phase are as follows.

componentWillRecieveProps()

When a component receives new props, it is called. This.setState() method should be used to perform state transition in order to update the state in response to changes in the props. This.props and nextProps should be compared.

shouldComponentUpdate()

It is called whenever a component decides to update or make changes to the DOM. It enables you to manage how the component updates itself. This method will update the component if it returns true. If not, the component will forgo updating.

componentWillUpdate()

Just before component updating starts, it is called. This.setState() cannot be used to modify the component state in this case. If shouldComponentUpdate() returns false, it won't be called.

render()

It is called to look at this. props and this. state and return one of the types listed below: React elements, Arrays and fragments, Booleans or null, String, or Number. The code inside render() will be called once more to confirm that the component displays itself correctly if shouldComponentUpdate() returns false.

componentDidUpdate()

It is used right away following component updating. You can use this method to insert any code that you want to run after an update has taken place. The initial render does not call this method.

4. Unmounting Phase

It is the last stage of the lifecycle of a react component. When a component instance is removed from the DOM and destroyed, it is called. There is only one method in this phase, which is described below.

componentWillUnmount()

Just before a component is permanently unmounted and destroyed, this method is called. Any necessary cleanup-related tasks, such as invalidating timers, and event listeners, canceling network requests, or clearing out DOM elements, are carried out by this process. A component instance that has been unmounted cannot be remounted.

Thanks For Reading!