Component Life Cycle in react js

• Create Components folder under src folder
• Add ComponentLifeCycle.js file and add below Code

import React, { Component } from "react";

class ComponentLifeCycle extends Component {

constructor(props) {

super(props);

this.state = { hello: "Adi" };

this.changeState = this.changeState.bind(this);

}

render() {

return (

<div>

Component Life Cycle

<h3>Hello {this.state.hello}</h3>

<button onClick={this.changeState}>Click Here!</button>

</div>

);

}

UNSAFE_componentWillMount() {

console.log("Component Will MOUNT!");

}

componentDidMount() {

console.log("Component Did MOUNT!");

}

changeState() {

this.setState({ hello: "All!!- Its a great reactjs ." });

}

UNSAFE_componentWillReceiveProps(newProps) {

console.log("Component Will Recieve Props!");

}

shouldComponentUpdate(newProps, newState) {

return true;

}

UNSAFE_componentWillUpdate(nextProps, nextState) {

console.log("Component Will UPDATE!");

}

componentDidUpdate(prevProps, prevState) {

console.log("Component Did UPDATE!");

}

componentWillUnmount() {

console.log("Component Will UNMOUNT!");

}

}

export default ComponentLifeCycle;

• Open App.js file and update code as below\

import React from "react";

import ReactDOM from "react-dom";

import ComponentLifeCycle from "./components/ComponentLifeCycle";

function App() {

return (

<div className="App">

<ComponentLifeCycle />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output: