Updated April 11, 2023
Introduction to React componentWillMount()
In react js there are many life cycle methods which performs several task in the same way the componentWillMount() is a life cycle method in the react js. It allows us to decide to perform certain activity before calling or rendering the html contents. For example if we are displaying view on the user side and the data is totally different then what we have expected. So in such type of condition we can use the componentWillMount() method, as this method always get called before the call to the render function hence we can change the contents before displaying to the end user.
Syntax:
In the below syntax we have created a simple syntax for the componentWillMount() function in react js.
- Before performing any activity the first thing they will call is the constructor and then call for the componentWillMount() function.
- Inside this function we can perform some of the important activities like modification of html view for the end users etc .
- Next thing will be called to render, as we have already done some modification in the componentWillMount() section the changed value will be displayed at the user end.
componentWillMount() {
//Perform the required activity inside it
}
//Call the render method to display the HTML contents.
render(){
}How componentWillMount() works in React?
You have seen the web applications, when you open any site the first time the web application open and you will see some contents, in case suppose you open the web application and due to some reason the data which we fetched from server is not suitable to display to end user, so in that case we will use the function componentWillMount(). This function always execute before the execution of the render and we know that render play the role of displaying of data to the end users.
We can see the working of the componentWillMount() with the help of some of the below points:
- First thing happens when component loaded and loaded component will call first to the state initialization then it will start with the other activity.
- Second thing it will perform is, it will call to the componentWillMount() function and inside this function we can perform some of the important things, like modification of the data coming from the server to display better contents to the customer, and we can change some static data also to display for the end users.
- Finally the main function of the react will be called render function, as we know the main purpose of the render function in the react js is to display for the end users.
- We can take some examples also to elaborate it in the better way, suppose you have an ecommerce website and customer is browsing products on the site and in case some of products are out of stock in that case we can check the products which are visible to customer and check the product counts and if it is less then we can control it’s view by adding any specific message for this product as there is less remain something else.
Example of React componentWillMount()
Below is a simple example where we are using the concept of the componentWillMount() and inside this concept we have used the CSS, HTML and React JavaScript codes.
React JavaScript Code:
class Species extends React.Component {
constructor(props) {
super(props);
//Initialising the states for the initial time to display
this.state = {
//Here we are initialising the value by assigning the value as the undefined
sp: undefined
}
}
//Component will mount function call after initialising the value of the states
componentWillMount() {
//Defining the variable to hold the animal detail
let sp;
//Checking the animal type and accordingly assigned the value of sp
if (this.props.type == 'Animal' || this.props.type == 'sweety') {
sp = 'Dog';
} else if (this.props.type == 'Bob' || this.props.type == 'Devid') {
sp = 'Dog'
} else {
//In case none of the case matched then display the below info
sp = 'Not known'
}
//Change the state value on the sp accordion to the change coming from the above
this.setState({ sp });
}
//Call of the render function after performing the task of the componentWillMount()
render() {
return (
<div className="block">
<h2>
//Here displaying the final detail of the animal
{this.props.type} is a {this.state.sp}
</h2>
</div>
);
}
}
//Finally we are attaching the component with the HTML and preparing for rendering it .
ReactDOM.render(<Species type="Animal" />,
//Attaching to class which we have given as the name to div in html section below .
document.querySelector(".test-class"));HTML Code:
This is the html code to display the above react component for end users:
<div class="test-class"></div>CSS Code:
Below is the CSS for designing the below html components:
.test-class {
height: 99%;
width:99%;
.block {
background-color: yellow;
color: red;
padding: 18px;
border: 10px solid green;
h2 {
font-size:22px;
}
}
}Output:
Advantages
Given below are the advantages :
- It allows us to modify the contents before displaying to the end user, which creates a better impression to the end user, otherwise anything can be displayed to the end user.
- Because it is a react system defined method, if we want to achieve the same functionality with the help of writing any custom function then it will not be able to give us the same performance as it is part of the react lifecycle and hence it is optimized.
Recommended Articles
This is a guide to React componentWillMount(). Here we discuss the introduction, syntax, and working of React componentWillMount() along with programming examples and advantages. You may also have a look at the following articles to learn more –
