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.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js
//src/App.js
import React from 'react';
//React Lifecycle
class App extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
//The getDerivedStateFromProps method is called right before the render method:
//static getDerivedStateFromProps(props, state) {
// return {favoritecolor: props.favcol };
//}
//The componentDidMount() method is called after the component is rendered.
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
//getDerivedStateFromProps method This is the first method that is called when a component gets updated.
//static getDerivedStateFromProps(props, state) {
// return {favoritecolor: props.favcol };
//}
//shouldComponentUpdate() method you can return a Boolean value that specifies whether React should continue with the rendering or not.
//shouldComponentUpdate() {
// return true;
//}
//changeColor = () => {
// this.setState({favoritecolor: "blue"});
//}
//getSnapshotBeforeUpdate() method you have access to the props and state before the update, meaning that even after the update, you can check what the values were before the update.
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById("div1").innerHTML =
"Before the update, the favorite was " + prevState.favoritecolor;
}
//componentDidUpdate method is called after the component is updated in the DOM.
componentDidUpdate() {
document.getElementById("div2").innerHTML =
"The updated favorite is " + this.state.favoritecolor;
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
<div id="div1"></div>
<div id="div2"></div>
</div>
);
}
}
export default App;
Example 2 src/App.js
//src/App.js
import React from 'react';
//React Lifecycle
class App extends React.Component {
constructor(props) {
super(props);
this.state = {show: true};
}
delHeader = () => {
this.setState({show: false});
}
render() {
let myheader;
if (this.state.show) {
myheader = <Child />;
};
return (
<div>
{myheader}
<button type="button" onClick={this.delHeader}>Delete Header</button>
</div>
);
}
}
//componentWillUnmount method is called when the component is about to be removed from the DOM.
class Child extends React.Component {
componentWillUnmount() {
alert("The component named Header is about to be unmounted.");
}
render() {
return (
<h1>Hello World!</h1>
);
}
}
export default App;
Example 3 src/App.js
//src/App.js
import React from 'react';
//React Lifecycle
class App extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
export default App;
