Skip to content

Spoke Right

Education for everyone

https://spokeright.com
Primary Menu
  • Home
  • Our Services
    • Translation
    • Interpretation
    • Transcription
    • Voice-Over
    • Proofreading
    • Content writing
  • Free Education
    • Learn Android Studio
    • Learn Python
    • Learn MongoDB
    • Learn MySql
    • Learn React
    • Montessori Education
  • Spoke Right News
  • Earn Online
  • Classic Games by Spoke Right
    • TicTac
    • Checkers
    • Foosball
    • Billiards
    • Master Chess
    • Logic Game
  • Contact Us
Download Now
  • Home
  • Learn React
  • How to understand lifecycle methods in ReactJS
  • Learn React

How to understand lifecycle methods in ReactJS

Spoke Right December 12, 2022 3 min read

Component Life Cycle In ReactJS

React Component Life-Cycle

Each process of component creation in ReactJS involves different lifecycle methods, also known as the component’s lifecycle. They may be easily called at various points during a component’s life, as they are not very complicated in nature. The four different phases of the lifecycle of the component are the Initial Phase, the Mounting Phase, the Updating Phase and the Unmounting Phase. Each of these phases can be distinguished on the basis of their specific lifecycle methods.

The Initial Phase:

Also known as the birth phase of the lifecycle of a ReactJS component, at this phase, the component starts its journey on the way to the DOM. The initial phase only occurs once and in this phase, a component contains the default Props and initial State. The initial phase consists of the following methods:

  • getDefaultProps() method: It is used to set the default props before any interaction occurs, and thus it specifies the default value of this.props.
  • getInitialState() method: It is used to set an initial state before any interaction occurs, and thus it specifies the default value of this.state.

The Mounting Phase:

The instance of a component is created and inserted into the DOM in the mounting phase of the lifecycle of a ReactJS component. The mounting phase consists of the following methods:

  • componentWillMount() method: It is used to avoid the re-render of the component on calling the setState() method and thus is invoked immediately before a component gets rendered into the DOM.
  • componentDidMount() method: It is used for DOM querying operations and thus is invoked immediately after a component gets rendered and placed on the DOM.
  • render() method: It is used for returning a single root HTML node element and thus is defined in each and every component.
  • The Updating Phase:

    The new Props and change State options are available in the updating phase of the lifecycle of a ReactJS component. Handling user interaction and providing communication with the components hierarchy are also the features of this phase. It is a repeatable phase which ensures that the component is displaying the latest version of itself. The updating phase consists of the following methods:

    • componentWillRecieveProps() method: It is used to invoke when a component receives new props.
    • shouldComponentUpdate() method: It is used to control the component’s behaviour of updating itself and is thus invoked when a component decides any changes/updates to the DOM.
    • componentWillUpdate() method: It is used to restrict the change in the component state by invoking this.setState() method, and is thus invoked just before the component updating occurs.
    • render() method: It is used to examine this.props and this.state. It is invoked to return one of the following types: React elements, Arrays and fragments, Booleans or null, String and Number.
    • componentDidUpdate() method: It is used to execute code once the updating occurs and is thus invoked immediately after the component updating occurs.

    The Unmounting Phase:

    Also known as the final phase of the lifecycle of a ReactJS component, this phase is called when a component instance is destroyed and unmounted from the DOM. The Unmounting phase consists of one method:

    • componentWillUnmount() method: It is used to perform any necessary cleanup related task such as invalidating timers, event listener, cancelling network requests, or cleaning up DOM elements, and is thus invoked immediately before a component is destroyed and unmounted permanently.

    Example:

    import React, { Component } from 'react';  
    class App extends React.Component {  
    constructor(props) {  
    super(props);  
    this.state = {msg: "World"};  
    this.changeState = this.changeState.bind(this)  
    }    
    render() {  
    return (  
    <div>  
    <h1>Lifecycle</h1>  
    <h3>Hello {this.state.msg}</h3>  
    <button onClick = {this.changeState}>Click to Update</button>          
    </div>  
    );  
    }  
    componentWillMount() {  
    console.log('Action: Component Will MOUNT!')  
    }  
    componentDidMount() {  
    console.log('Action: Component Did MOUNT!')  
    }  
    changeState(){  
    this.setState({msg:"A beautiful day ahead."});  
    }  
    componentWillReceiveProps(newProps) {      
    console.log('Action: Component Will Receive Props!')  
    }  
    shouldComponentUpdate(newProps, newState) {  
    return true;  
    }  
    componentWillUpdate(nextProps, nextState) {  
    console.log('Action: Component Will UPDATE!');  
    }  
    componentDidUpdate(prevProps, prevState) {  
    console.log('Action: Component Did UPDATE!')  
    }  
    componentWillUnmount() {  
    console.log('Action: Component Will UNMOUNT!')  
    }  
    }  
    export default App;

    Continue Reading

    Previous: What is a component API in React JS
    Next: What are forms in Reactjs

    Related Stories

    Which is Difference Between AngularJS And ReactJS
    1 min read
    • Learn React

    Which is Difference Between AngularJS And ReactJS

    December 16, 2022
    What is higher-order component in Reactjs
    2 min read
    • Learn React

    What is higher-order component in Reactjs

    December 16, 2022
    How do I create a table in ReactJS
    2 min read
    • Learn React

    How do I create a table in ReactJS

    December 16, 2022

    This AD Will support Us

    Support Us

    Coding Ustad LTD Support
    Coding Ustad LTD Support

    Coding Ustad LTD

    Coding Ustad LTD
    Coding Ustad LTD

    Recent Posts

    • How to Install Node.js and npm on CentOS 7
    • How to Install Node.js and npm on CentOS 7
    • How to Install CentOS Web Panel (CWP) on CentOS 7
    • The Power of Marketing in Real Estate: A Guide to Boost Your Business
    • Vehicle Verification in Pakistan

    Get free Hosting

    Hostens.com - A home for your website

    You may have missed

    How to Install Node.js and npm on CentOS 7
    4 min read
    • Coding Ustad LTD
    • Education for Everyone

    How to Install Node.js and npm on CentOS 7

    May 3, 2023
    How to Install Node.js and npm on CentOS 7
    4 min read
    • Coding Ustad LTD
    • Education for Everyone

    How to Install Node.js and npm on CentOS 7

    May 2, 2023
    How to Install CentOS Web Panel (CWP) on CentOS 7
    3 min read
    • Coding Ustad LTD
    • Education for Everyone

    How to Install CentOS Web Panel (CWP) on CentOS 7

    May 2, 2023
    The Power of Marketing in Real Estate: A Guide to Boost Your Business https://thaikadar.com/secureinvestment/
    2 min read
    • Article By Spoke Right
    • Blog By Spoke Right
    • Circular Byte Private Limited

    The Power of Marketing in Real Estate: A Guide to Boost Your Business

    January 30, 2023
    • Home
    • Our Services
    • Free Education
    • Spoke Right News
    • Earn Online
    • Classic Games by Spoke Right
    • Contact Us
    Copyright © All rights reserved. | MoreNews by AF themes.