What Is The React Component Lifecycle?

Board Infinity -

Introduction

Essentially, React web apps are collections of independent components that interact according to user interactions.

Every React Component has a lifecycle, also defined as the series of methods invoked throughout the component's existence.

Source: React Lifecycle Methods

React Components go through the following four stages of life.

  • Mounting (inserting nodes into the DOM)
  • Updating (modifying nodes in the DOM)
  • Unmounting (unmounting nodes in the DOM)
  • Error handling (ensuring you have bug-free code)

Phases in Reactjs LifeCycle

The lifecycle methods for each phase are specific to it. Let's examine each phase one at a time.

Initial Phase

A ReactJS component's lifecycle begins with this phase. In this step, the component starts its journey toward the DOM. The component will contain its default Props and initial State during this phase. Components construct their default properties during construction.

The initial phase only occurs once and consists of the following methods.

  • getDefaultProps()
  • getInitialState()

Mounting Phase

This phase involves the creation of a component instance and inserting it into the DOM during the execution. It consists of the following methods.

  • componentWillMount()

The component is rendered into the DOM immediately after this method gets invoked. The component will not re-render when setState() gets called inside this method.

  • componentDidMount()

A component gets rendered and placed on the DOM immediately after this method gets invoked. You can now query the DOM in any way you want.

  • render()

In every component, this method gets defined and returns a single root HTML node. You can return a null or false value if you do not wish to render anything.

Updating Phase

A react component's lifecycle continues with this phase. This phase involves the creation of a new Prop and a new State. As well as handling user interaction, this phase allows communication with the hierarchy of components.

The primary objective of this phase is to display the most recent version of the component. This phase repeats continually, unlike Birth or Death. This phase includes the following methods.

  • componentWillRecieveProps()

When a component receives new props, this method gets invoked. You can perform state transitions using this.setState() by comparing this.props and nextProps in response to prop changes.

  • shouldComponentUpdate()

A component will invoke this method when it wants to modify or update the DOM. It will allow you to control the component's behavior when it updates itself. This method will update the component if it returns true. The component will skip updating if this is the case.

  • componentWillUpdate()

This function gets invoked just before component updating takes place. This.setState() method cannot modify the component state. If shouldComponentUpdate() returns false, it will not get called.

Unmounting Phase

This is the final phase of the lifecycle of a react component. DOM components are destroyed and unmounted when this method gets called. This method contains only one phase.

  • componentWillUnmount()

Before a component is permanently unmounted and destroyed, this method gets invoked. This function performs cleanup-related tasks like invalidating timers, canceling network requests, and cleaning up the DOM. When a component instance is unmounted, it cannot be mounted again.

Code Sample

The following code will help you understand each method of react life cycle methods.

import React, { Component } from 'react'; 
 
class App extends React.Component { 
  constructor(props) { 
      super(props); 
      this.state = {hello: "Board Infinity"}; 
      this.changeState = this.changeState.bind(this) 
  }   
  render() { 
      return ( 
        <div> 
            <h1>ReactJS component's Lifecycle Sample Code</h1> 
            <h3>Hello {this.state.hello}</h3> 
            <button onClick = {this.changeState}>Click Here!</button>         
        </div> 
      ); 
  } 
  componentWillMount() { 
      console.log('Component Will MOUNT method invoked!') 
  } 
  componentDidMount() { 
      console.log('Component Did MOUNT method invoked!') 
  } 
  changeState(){ 
      this.setState({hello:"All!! It is Sample reactjs code tutorial."}); 
  } 
  componentWillReceiveProps(newProps) {     
      console.log('Component Will Recieve Props method invoked!') 
  } 
  shouldComponentUpdate(newProps, newState) { 
      return true; 
  } 
  componentWillUpdate(nextProps, nextState) { 
      console.log('Component Will UPDATE method invoked!'); 
  } 
  componentDidUpdate(prevProps, prevState) { 
      console.log('Component Did UPDATE method invoked!') 
  } 
  componentWillUnmount() { 
      console.log('Component Will UNMOUNT method invoked!') 
  } 
} 
export default App;

write your code here: Coding Playground

Conclusion

In React, all lifecycle methods get executed at different stages of the component's lifecycle. Starting with creating the component, mounting it, updating it, or unmounting it, and finally handling errors. They all have their own roles, but some play a more prominent role than others. The only method necessary throughout the entire lifecycle is render(). These lifecycle methods are what give React its real power.