React Component Lifecycle
React Components go through three main phases during their existence in memory.
The phases are:
Mounting
This process involves the creation of the component in memory and its insertion in the DOM
Updating
The component updates when the state changes or when it receives new props. The function forcedUpdate() give us the possibility to also update the component.
Unmounting
This is the moment when the component is removed from the DOM
— — — — — — — — — — — — — -
MOUNTING
Mounting has 4 methods. They are executed in this sequence.
1 — constructor()
2 — getDerivedStateFromProps()
3 — render()
4 — componentDidMount()
> constructor()
This is the first method that is called when the component is created. This is the best place to set the state.
super(props)takes props as an argument and passes it to its parent (React.Component. This allows the child to inherit the parent’s methods.
class Example extends React.Component { constructor(props) {
super(props);
this.state = {favoriteFood: “pasta”};
} render() {
return (
<h1>My Favorite Food is {this.state.favoriteFood}</h1>
);
}
}ReactDOM.render(<Header />, document.getElementById(‘root’));
This code will initialize the state favoriteFood variable to “pasta” and render the component
> getDerivedStateFromProps()
This method gets called right before render(). This is the best place to update the state based on the props received.
It’s like making a subscription to a state based on the props. A subscription that allows some operations before updating the state.
It takes the state and props as arguments.
It works the same as when mounting. When updating the component it binds the state to the props and immunizes the state it to change from other ways.
class Example extends React.Component { constructor(props) {
super(props);
this.state = {favoriteFood: “pasta”};
} static getDerivedStateFromProps(props, state) {
return {favoriteFood: props.favFood };
} render() {
return (
<h1>My Favorite Food is {this.state.favFood}</h1>
);
}
}ReactDOM.render(<Header favFoodl=”barbecue”/>, document.getElementById(‘root’));
In the above code snippet, the favorite food will be the one updated through the props, no the one from the constructor.
If this is not understood here, this method also gets called while updating.
> render()
This method doesn’t put the element in the real DOM yet.
We have used this method in previous examples.
Every react component needs to have it otherwise it throws an error.
class Example extends React.Component {
render() {
return (
<h1>Here you can see Example component’s content</h1>
);
}
}ReactDOM.render(<Header />, document.getElementById(‘root’));
> componentDidMount()
This method executes only once in the life of a component: when it’s placed for the first time in the DOM
class Example extends React.Component { constructor(props) {
super(props); this.state = {favoriteFood: “pasta”};
} componentDidMount() {
setTimeout(() => {
this.setState({favoriteFood: “barbecue”})
}, 1000)
} render() {
return (
<h1>My Favorite Food is {this.state.favoriteFood}</h1>
);
}
}ReactDOM.render(<Header />, document.getElementById(‘root’));
The above code snippet will change the state one second after it’s mounted. And it will update the DOM with the new state.
UPDATING
Updating has 5 methods executed in this sequence:
1 — getDerivedStateFromProps()
2 — shouldComponentUpdate()
3 — render()
5 — getSnapshotBeforeUpdate()
6 — componentDidUpdate()
> getDerivedStateFromProps()
The same as with mounting. This method has been already discussed.
> shouldComponentUpdate()
This method’s name is very descriptive. It needs to return true or false. If it’s false, the component will not update in the DOM.
This can be used when trying to save processing power when a component has been commanded to update but it’s not necessary in terms of user experience.
If it returns something different than false it advances to the next stage of the updating process.
class Example extends React.Component { constructor(props) {
super(props);
this.state = {favoriteFood: “pasta”};
} shouldComponentUpdate() {
return false;
} changeFood = () => {
this.setState({favoriteFood: “barbecue”});
} render() {
return (
<div>
<h1>My Favorite Food is {this.state.favoriteFood}</h1>
<button type=”button” onClick={this.changeFood}>Change Food</button>
</div>
);
}
}ReactDOM.render(<Header />, document.getElementById(‘root’));
In the above example. The component, when clicked, will not show its new state in the browser.
> render()
Nothing much to add since this method is also described in the mounting process.
> getSnapshotBeforeUpdate()
This is the last method that actually gets called before the propagation to the DOM. It doesn’t get called while mounting nor while unmounting.
Only while updating.
Here, you can check the state and the props of an object before updating.
componentDidUpdate() is the next method in the execution sequence. It has to be called when calling getSnapshotBeforeUpdate(), otherwise you’ll get an error. They are like a team forced to work together when getSnapshotBeforeUpdate() gets called.
Another error you can get is if this method doesn’t return a value. The return value can be accessed in the next method: componentDidUpdate() as a parameter. We will show later more on this.
There is not going to be more user code before rendering. This method can be used to pass the previous state and props to componentDidUpdate(). It can also be used to send some information to an API before waiting for the component to do all its internal work for rendering and placing it in the DOM.
This method can be used to look as some attribute of the current DOM and pass it to componentDidUpdate()
class Example extends React.Component { constructor(props) {
super(props);
this.state = {favoriteFood: “pasta”};
} componentDidMount() {
setTimeout(() => {
this.setState({favoriteFood: “barbecue”})
}, 1000)
} getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById(“div1”).innerHTML =
“Before the update, the favorite was food” + prevState.favoriteFood;
} componentDidUpdate() {
document.getElementById(“div2”).innerHTML =
“The updated favorite is food” + this.state.favoriteFood;
} render() {
return (
<div>
<h1>My Favorite Food is {this.state.favoriteFood}</h1>
<div id=”div1"></div>
<div id=”div2"></div>
</div>
);
}
}ReactDOM.render(<Header />, document.getElementById(‘root’));
This example shows in the browser the state variable of the component before updating.
> componentDidUpdate()
This method is executed after the component has changed the DOM.
If getSnapShotBeforeUpdate() was called, It can consume its return value as the third parameter of the method. The two previous ones being prevProps and prevState respectively. As shown here:
componentDidUpdate(prevProps, prevState, snapshot) {
//todo
}
UNMOUNTING
Unmounting only has one method.
> componentWillUnmount()
If there is the necessity to send a message to an API when the component gets unmounted from the DOM, this is the moment. It also can be used to clean some cache and storage in the browser.
