ReactJS UNSAFE_componentWillMount() Method - GeeksforGeeks

17 Dec, 2021
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.
sagartomar9927
Picked
React.js-Methods
ReactJS-Basics
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ReactJS useNavigate() Hook
How to set background images in ReactJS ?
Axios in React: A Guide for Beginners
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript