Components Life Cycle in React JS: Did you ever hear of events in JS? The component life cycle is based on events. We can also say the component life events, When It will be rendered After It mounts and After It unmounts. React team created these events into methods.
Component Life Cycle Methods
Here are the following Component lifecycle methods:
componentWillMount: This method is executed before rendering on the server-side and client-side.componentDidMount: This method is executed after component first renders on the client-side only
componentWillReceiveProps: This method is executed as soon as a component receives props.
shouldComponentUpdate: This method verifies whether a component should update on data changes.
componentWillUpdate: This method executes when a component before renders.
componentDidUpdate: This method executes when a component after render.
componentWillUnmount: This method executes as soon as a component unmounts.
Component Life Cycle Example
Let’s go ahead and create a fresh directory and create a component called ComponentLifeCycle.js. I will put an on click increment example to it, so conosle.log will show the events that are passing.
src/ComponentLifeCycle.js
import React from 'react';
class App extends React.Component{
constructor(props) {
super(props);
this.state = {
data: 0
}
this.setNewNumber = this.setNewNum-
ber.bind(this)
};
set New Number() {
this.setState({data: this.state.data + 1})
}
render() {
return(
<div>
<button onClick = {this.setNewNumber}
>INCREMENT</button>
<Content myNumber = {this.state.data}></
Content>
</div>
) ;
}
}
class Content extends React.Component{
componentWillMount() {console.log('Component WILL MOUNT!)}
componentDidMount() {console.log('Component DID MOUNT!)}
componentWillReceiveProps(newProps) {console.log('Component WILL RECIEVEPROPS!)}
shouldComponentUpdate(newProps, newState) {
return true;
}
componentWillUpdate(nextProps, nextState) {console.log('Component WILL UPDATE!');}
componentDidUpdate(prevProps, prevStateconsole.log('Component DID UPDATE!')}
componentWillUnmount() {console.log('Component WILL UNMOUNT!.}
render() {
return(
<div>
<h3>{this.props.myNumber}</h3>
</div>
) ;
}
}
export default App;
There are many functions in our component but only two functions execute, this is because of events. Other events didn’t pass. You can see a button on your app. Go ahead and click on that button, you will see console full of logs.
Component Life Cycle Exercise
Here are some questions about the chapter:
- What is a component lifecycle?
- What is componentWillMount?
What is a component lifecycle?
Every Component has a few “lifecycle techniques” that you can abrogate to run code at specific circumstances all the while. Strategies prefixed with will are called just
before something happens, and techniques prefixed with did are called directly in the wake of something happens.
What is component Will Mount?
This method is executed before rendering on the server-side and client-side. The React expects this value as a function to be executed.
Conclusion
So we have ended our chapter and we have learned how component life cycle works.