Mastering ReactJS: Understanding Hooks, Components, and Libraries

What Is The React Component Lifecycle?

Board Infinity
Board Infinity
What Is The React Component Lifecycle?

    React Functional Components: Introduction

    Functional Components and Class Components in ReactJS

    Understanding setState in Reactjs

    Learn everything about useState in React

    What Is The React Component Lifecycle?

    Controlled and Uncontrolled Components in ReactJS

    useCallback: Hooks in Reactjs

    React Hooks and its Advantages

    Working with React Router

    A Quick Guide to React Router DOM

    Understanding Axios in ReactJS

    Working of Axios in React

    Integrating Node APIs with React

    The state of React in 2022 – Re-Inventing The Experience of User Interface Design

    ReactJS vs. VueJS: Understanding the Differences

    React vs. React Native: Understanding the Differences

    ReactJS Project Ideas for Beginners

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.