Scribd
Upload
7 views2 pages

Rect Lifecycle8

The document outlines the lifecycle of React components, detailing the three main phases: Mounting, Updating, and Unmounting. It describes key lifecycle methods such as componentDidMount, shouldComponentUpdate, componentDidUpdate, and componentWillUnmount, along with their purposes and default behaviors. Additionally, it includes a sample React component demonstrating these lifecycle methods in action.

Uploaded by

vivekmohite104
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views2 pages

Rect Lifecycle8

The document outlines the lifecycle of React components, detailing the three main phases: Mounting, Updating, and Unmounting. It describes key lifecycle methods such as componentDidMount, shouldComponentUpdate, componentDidUpdate, and componentWillUnmount, along with their purposes and default behaviors. Additionally, it includes a sample React component demonstrating these lifecycle methods in action.

Uploaded by

vivekmohite104
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Lifecycle of Components

Each component in React has a lifecycle which you can monitor and manipulate during
its three main phases.

The three phases are: Mounting, Updating, and Unmounting

componentDidMount
The componentDidMount() method is called after the component is rendered.

This is where you run statements that requires that the component is already placed
in the DOM.

shouldComponentUpdate
In the shouldComponentUpdate() method you can return a Boolean value that specifies
whether React should continue with the rendering or not.

The default value is true.

componentDidUpdate
The componentDidUpdate method is called after the component is updated in the DOM.

This action triggers the update phase, and since this component has a
componentDidUpdate method, this method is executed and writes a message in the
empty DIV element:

componentWillUnmount
The componentWillUnmount method is called when the component is about to be removed
from the DOM.

import React, {Component} from 'react';

class Lifecycle extends React.Component{

constructor(props){
super();
this.state={hello:"React"};
this.changeState=this.changeState.bind(this)

}
render(){
return(
<div>
<h1>React JS Component's Lifecycle </h1>
<h3>Hello{this.state.hello}</h3>
<button onClick={this.changeState}>Click here!</button>
</div>

);
}
componentWillMount(){
console.log('Component will Mount!');
}
componentDidMount(){
console.log('component did Mount');

}
changeState(){
this.setState({hello:"All!! Its great react tutorial."})
}
componentWillReceiveProps(){
console.log('Component will receive props!')
}
shouldComponentUpdate(newProps,newState){
return true;
}
componentWillUpdate(newProps,newState){
console.log('Component will Update!');

}
componentDidUpdate(prevProps,prevState){
console.log('Component did update!');
}
componentWillUnmount(){
console.log('Console will Unmount!!')
}
}
export default Lifecycle;

index.js

import React from 'react';


import ReactDOM from 'react-dom/client';
import './index.css';
// import App from './App';
import Lifecycle from './lifecycle';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));


root.render(
<React.StrictMode>
<Lifecycle />
</React.StrictMode>
);

You might also like