ComponentWillMount( ) in reactjs

This article describes how and when to use componentWillMount() method in react.

What is ComponentWillMount()

The flow of a component typically involves the following steps :-
1- constructor ().
2- componentWillMount ().
3- Loading the HTML of the component.

When a component is loaded, three things occur :-

  • The initial action that a component will perform is calling the constructor() function.
  • Next, the componentWillMount() method will be invoked.
  • at the end HTML of the component will be loaded.


This function is generally called before the HTML of the component gets loaded and the render() method is called.
This method is invoked only once when a component is either called or loaded.


This method is useful if you need to do some setup work before the component is displayed, like fetching some data from the internet or initializing some variables.

Note: This method is now deprecated.

Syntax :

componentWillMount(){
// code you want to perform
}


How it is used ?

In this example, we will make a React app that gets information from an API and shows it to the user on their screen.

To create the desired functionality, we will start by defining a class called “MyComponent” that extends the parent class “Component“.

Next, we will create a constructor function within the “MyComponent” class. We will call the “super()” function to ensure that the parent class is properly initialized, and then we will define the initial state for our component.

After creating the constructor function and defining the initial state, we will call the “componentWillMount” method and make an API call within it. Once the data is retrieved, we will update the state of our component accordingly.

Finally, once all the necessary data has been fetched and the state of our component has been updated, we will render the HTML content and display the data within our React application.

import React, { Component } from 'react';

class MyComponent extends Component {
   constructor() {
    super();
    this.state = {
      data: {}
    };
  }

  componentWillMount() {
    fetch(""https://api.example.com")
      .then(response => response.json())
      .then(json => {
        this.setState({ data: json });
      });
  }

  render() {
    return (
      <div>
        API Called
        <h1>{data.title}</h1>
        <img src={data.imageurl} alt='img.jpg' />
       <p>{data.description}</p> 
      </div>
    );
  }
}

export default MyComponent;

Difference between UseEffect() and ComponentWillMount( )

  • The useEffect() hook is utilized in function-based components, while the componentWillMount() method is used in class-based components.
  • After version 16 of React, it is no longer necessary to use class-based components in your project. Instead, you can create applications using function-based components, which require less storage space and are easier to work with.
  • The componentWillMount() method has been deprecated by React and is no longer recommended for use. Instead, React recommends using the useEffect() hook as a replacement.
  • The useEffect() hook can be given dependencies, and it will re-render the function every time there is a change in the dependency. On the other hand, componentWillMount() does not take dependencies and only renders once during the loading of the component.
  • You can use the useEffect() hook as many times as needed within a component, but the componentWillMount() method can only be used once within a component.

Leave a Comment