⚠️ Lifecycle Methods are a class component thing. You can achieve similar effects in function components with the useEffect() hook. See effects.md
Every component has access to methods that allow you to update application state to reflect UI changes before & after React "events". More specifically, each component in React has a lifecycle which you can monitor and manipulate during its three main phases: Mounting, Updating, and Unmounting.
Mounting refers to the initial rendering of elements into the DOM.
React has four built-in methods that get called, in this order, when mounting a component:
constructor()- static
getDerivedStateFromProps() render()componentDidMount()
The render() method is required and will always be called, the others are optional and will be called if you define them.
The constructor() method is called first, when the component is initiated, and it is the natural place to set up the initial state and other initial values. The constructor() method is called with the props, as arguments, and you should always start by calling super(props) before anything else, this will initiate the parent's constructor method and allows the component to inherit methods from React.Component.
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {color: "red"};
}
render() {
return (
<h1>My favourite color is {this.state.color}</h1>
);
}
}The getDerivedStateFromProps() method is called right before rendering the element(s) in the DOM. This is the natural place to set the state object based on the initial props. It takes state as an argument, and returns an object with changes to the state.
This method exists for rare use cases where the state depends on changes in props over time. For example, it might be handy for implementing a
<Transition>component that compares its previous and next children to decide which of them to animate in and out.
The example below starts with the color being "red", but the getDerivedStateFromProps() method updates the color based on the favcol attribute:
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {color: "red"};
}
static getDerivedStateFromProps(props, state) {
return {color: props.favcol };
}
render() {
return (
<h1>My favourite color is {this.state.color}</h1>
);
}
}The render() method is required, and is the method that outputs HTML to the DOM.
The componentDidMount() method is called after the component is rendered. This is where you run statements that require that the component is already placed in the DOM (for example to fetch data from some API: see axios.md). Note that if you were to call setState() here, it would actually trigger a re-render (update).
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {color: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({color: "yellow"})
}, 2000);
}
render() {
return (
<h1>My favourite color is {this.state.color}</h1>
);
}
}The next phase in the lifecycle is when a component is updated. A component is updated whenever there is a change in the component's props, state using setState(), or by using the forceUpdate() method.
React has five built-in methods that are called, in this order, when a component is updated:
- static
getDerivedStateFromProps() shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()
As with mounting, the render() method is the only one that is required and will always be called.
The first method that's called when a component gets updated.
The example below has a button that changes the favourite color to blue, but since the getDerivedStateFromProps() method is called, the favourite color is rendered with the color from props.favcol.
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {color: "red"};
}
static getDerivedStateFromProps(props, state) {
return {color: props.favcol };
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>My favourite color is {this.state.color}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}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. If you were to simply return false, the component wouldn't update at all.
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {color: "red"};
}
shouldComponentUpdate() {
return false;
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>My favourite color is {this.state.color}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}The render() method is of course called when a component actually gets updated, it has to re-render the HTML to the DOM, with the new changes.
In the 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. If the getSnapshotBeforeUpdate() method is present, you should also include the componentDidUpdate() method, otherwise you will get an error.
class Test extends Component {
constructor(props) {
super(props);
this.state = {color: "red"};
}
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById("p1").innerHTML =
"Before the update, the favorite was " + prevState.color;
}
componentDidUpdate() {
document.getElementById("p2").innerHTML =
"After the update, the favorite was " + this.state.color;
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>My favourite color is {this.state.color}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
<p id="p1"></p>
<p id="p2"></p>
</div>
);
}
}The componentDidUpdate() method is called after the component is updated in the DOM. This can be a good place to perform any side effect operations like syncing to localStorage or a database, auto-saving or updating the DOM if working with uncontrolled from components. This method also has access to prevProps and prevState. Reminder, a component will update if:
setState()has been called- new
propshave been passed in from the parent component forceUpdate()has been called
class Test extends Component {
constructor(props) {
super(props);
this.state = {color: "red"};
}
componentDidUpdate(prevProps, prevState) {
console.log('Updated!');
console.log(`previous color: ${prevState.color}`);
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>My favourite color is {this.state.color}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}The next phase in the lifecycle is when a component is removed from the DOM. React calls this unmounting.
React has only one built-in method that gets called when a component is unmounted:
componentWillUnmount()
The componentWillUnmount() method is called when the component is about to be removed from the DOM. This is a good place to perform cleanup actions such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().
Parent component
class Test extends Component {
constructor(props) {
super(props);
this.state = {showChild: true};
}
removeChild = () => {
this.setState({showChild: false});
}
render() {
let child;
if (this.state.showChild) {
child = <Child />;
}
return (
<div>
{child}
<button type="button" onClick={this.removeChild}>Remove child</button>
</div>
);
}
}Child component
class Child extends Component {
componentWillUnmount() {
alert("The Child component is about to be unmounted.");
}
render() {
return (
<h1>Child</h1>
);
}
}In functional components, the useEffect() hook can be used to replicate lifecycle behavior.
If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.
See Using the Effect hook in the React docs.
import React, { useEffect } from 'react';
function Example(props) {
// componentDidMount (note the empty array)
useEffect(() => {
console.log('I have been mounted')
}, [])
return (
<div className="Example"></div>
);
}If you wanted the useEffect code to run whenever there was an update of any kind, you would pass nothing as the dependency:
import React, { useEffect } from 'react';
function Example(props) {
// componentDidMount and componentDidUpdate
useEffect(() => {
console.log('I will run whenever anything changes')
})
return (
<div className="Example"></div>
);
}If you need the function/code to update when a state value is updated, pass that value in as a dependency:
import React, { useState, useEffect } from 'react';
function Example(props) {
const [name, setName] = useState('');
// componentDidUpdate
useEffect(() => {
console.log('I will run whenever name changes')
}, [name])
return (
<div className="Example"></div>
);
}Lastly...
import React, { useState, useEffect } from 'react';
function Example(props) {
const [name, setName] = useState('');
// componentWillUnmount
useEffect(() => {
return () => {
console.log('I am unmounting')
}
}, [name])
return (
<div className="Example"></div>
);
}See also: effects.md