React Component has LifeCycle through which we can monitor or manipulate React Component during its phases
React three main phases are
- Mounting
- Updating
- Unmounting
What is Mounting in React Component phase ?
Mounting in React Component phase is that phase in which we put Elements in DOM
React Mounting Methods ?
React has four inbuilt Mounting methods
constructor()getDerivedStateFromProps()render()componentDidMount()
in following four mounting method render() method is required while other we use on the behalf of need
constructor()
constructor method is called when React Component initialize
Example:
class Color extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "blue"};
}
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
}
ReactDOM.render(<Color />, document.getElementById('root'));
What is getDerivedStateFromProps in React ?
in mountijng phase getDerivedStateFromProps is called before render() method
getDerivedStateFromProps change the State properties by Props
getDerivedStateFromProps has two parameters one is state and another is props
Example
class Color extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
static getDerivedStateFromProps(props, state) {
return {favoritecolor: props.favcol };
}
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
}
ReactDOM.render(<Color favcol="blue"/>, document.getElementById('root'));
render
render() is that method through that HTML output take place in DOM
Example
class Color extends React.Component {
render() {
return (
<h1>my color is </h1>
);
}
}
ReactDOM.render(<Color/>, document.getElementById('root'));
What is componentDidMount in React ?
React Component lifecycle in which componentDidMount method is called after render method call means after HTML output in DOM
Example
class Color extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "blue"})
}, 1000)
}
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
}
ReactDOM.render(<Color/>, document.getElementById('root'));
React Updating lifecycle after mounting
React has five inbuilt method that is called while updating DOM
getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()
getDerivedStateFromProps()
getDerivedStateFromProps() method is called just after update
Example:
class Color extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
static getDerivedStateFromProps(props, state) {
return {favoritecolor: props.favcol };
}
changeColor = () => {
this.setState({favoritecolor: "blue"});
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
ReactDOM.render(<Color favcol="yellow"/>, document.getElementById('root'));
No update will take place due to getDerivedStateFromProps() method
shouldComponentUpdate method
default value of shouldComponentUpdate is true. if shouldComponentUpdate will return false then no change will atke place
Example of shouldComponentUpdate with return false
class Color extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
shouldComponentUpdate() {
return false;
}
changeColor = () => {
this.setState({favoritecolor: "blue"});
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
ReactDOM.render(<Color />, document.getElementById('root'));
No change will take place with return false
Example of shouldComponentUpdate with return true
class Color extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
shouldComponentUpdate() {
return true;
}
changeColor = () => {
this.setState({favoritecolor: "blue"});
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
ReactDOM.render(<Color />, document.getElementById('root'));
Update will take place and value will be blue after click
render method in Update
After update render() will called to rerender the HTML to the DOM
class Color extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
changeColor = () => {
this.setState({favoritecolor: "blue"});
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
ReactDOM.render(<Color />, document.getElementById('root'));
getSnapshotBeforeUpdate in Update phase
getSnapshotBeforeUpdate is associate with componentDidUpdate() without componentDidUpdate() association getSnapshotBeforeUpdate will show error
getSnapshotBeforeUpdate has access to State and Props of React before update
componentDidUpdate() has acces to State and Props after Update
class Color extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById("div1").innerHTML =
"Before the update, the favorite was " + prevState.favoritecolor;
}
componentDidUpdate() {
document.getElementById("div2").innerHTML =
"The updated favorite is " + this.state.favoritecolor;
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<div id="div1"></div>
<div id="div2"></div>
</div>
);
}
}
ReactDOM.render(<Color />, document.getElementById('root'));
componentDidUpdate method
componentDidUpdate method is called after update to DOM
Example
class Color extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
componentDidUpdate() {
document.getElementById("mydiv").innerHTML =
"The updated favorite is " + this.state.favoritecolor;
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<div id="mydiv"></div>
</div>
);
}
}
ReactDOM.render(<Color />, document.getElementById('root'));
Unmounting lifecycle
Unmounting is the reverse of mounting it means in Unmounting HTML will get remove from DOM
Unmounting has only one inbuilt method
componentWillUnmount()
Example
class Color extends React.Component {
constructor(props) {
super(props);
this.state = {show: true};
}
delHeader = () => {
this.setState({show: false});
}
render() {
let myheader;
if (this.state.show) {
myheader = <Colorchild />;
};
return (
<div>
{myheader}
<button type="button" onClick={this.delHeader}>Delete Header</button>
</div>
);
}
}
class Colorchild extends React.Component {
componentWillUnmount() {
alert("The component named Header is about to be unmounted.");
}
render() {
return (
<h1>Hello World!</h1>
);
}
}
ReactDOM.render(<Color />, document.getElementById('root'));