Open In App

ReactJS UNSAFE_componentWillMount() Method

Improve
Improve
Like Article
Like
Save
Share
Report

The componentWillMount() method invokes right before our React component gets loaded or mounted in the DOM (Document Object Model). It is called during the mounting phase of the React Life-cycle, i.e., before render(). It is used to fetch data from outside the component by executing the React code synchronously which causes our component to render with empty data at first because this method doesn’t return anything before our component renders for the first time. As the fetch calls are asynchronous, our component doesn’t wait for this method to finish and continues to get rendered.

The componentWillMount() method has been deprecated in the latest releases of React as per this issue. It is recommended to use componentDidMount() method in its place but if we still want to use componentWillMount() we can do it by calling it as UNSAFE_componentWillMount(). It’s not suggested using this method according to React, that’s why the UNSAFE keyword comes at the beginning to give a gentle message to all the React developers to stop using this method. This method can be used to perform an action just before our React component gets mounted in the DOM.

Syntax:

class App extends Component {

  UNSAFE_componentWillMount() {
  
    //action you want to execute
     
  }
}

Creating React Application:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Project Structure: It will look like the following.

Example: In this example, we are going to build an application that gives an alert message before our React component loads in the DOM. Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

Filename: App.js

Javascript




import React from 'react';
class App extends React.Component {
 
  UNSAFE_componentWillMount() {
    // Performing an action
    alert(`Welcome to GeeksForGeeks portal`);
 
  }
 
  render() {
    return <h1>GeeksForGeeks</h1>;
  }
 
}
   
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.

Explanation: We receive an alert message through UNSAFE_componentWillMount() method before our component gets mounted in the DOM and then our component loads after rendering. This way, we can perform any action just before our component loads. As you can see a warning message also appears at the console when our component loads which clearly tells us that this method is not recommended for the use which we already discussed above.


Last Updated : 17 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads