What Is Life Cycle Method In Rectjs ? With It’s Example

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

Today now in this tutorial i would like to explain with you about component life cycle method. We know component have different types of method. So life cycle means component from create to component end stories.

We know that Component have three types of life cycle phase

1. Mounting

2. Updating

3. Unmounting

So Component have many types of method like

constructor()

We know that the constructor for a React component is called before it is mounted. So when implementing the constructor for a React application. Here component has subclass, So we should call super(props) before any other statement. So otherwise, this.props will be undefined in the constructor, which can lead to big bugs.

render()

the render() method will be required in class component. So it will return HTML Code.

componentDidMount()

Now in this method call when component invoked. Then the componentDidMount() is invoked immediately after a component is mounted. So this is a good place to instantiate of the network request.

componentDidUpdate()

Here the componentDidUpdate() method is call after by updating. So this is also a good place to do network requests also as long as we can compare the current props to previous props.

componentWillUnmount()

We know that componentWillUnmount() method is unmount before the component is destroyed. So it can Perform any necessary or cleanup in this method.

So here we have to understand rectjs life cycle in detail then we will click here http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram

Life Cycle Example

/src/App.js file

import React from 'react'

class App extends React.Component{

    constructor(){
        console.warn('constructor call')
        super();
        this.state = {
            title:'App Component'
        }
    }

    componentDidMount(){
        console.warn('componentDidMount call')
    }

    componentWillUnmount(){
        console.warn('componentWillUnmount call')
    }

    componentDidUpdate(){
        console.warn('componentDidUpdate call')
    }

    render(){
        console.warn('render call')
        return(
            <div>
                <h1>App Component</h1>
            </div>
        )  
    }
}

export default App;

Read Also : How to use bootstrap 4 in react js?

I hope it will help you. Also you can follow us on Facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →