ReactJS UNSAFE_componentWillMount() Method
Last Updated :
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.
Similar Reads
ReactJS UNSAFE_componentWillUpdate() Method The componentWillUpdate() method provides us the control to manipulate our React component just before it receives new props or state values. It is called just before the rendering of our component during the updating phase of the React Life-cycle ,i.e., this method gets triggered after the updation
3 min read
ReactJS componentWillUnmount() Method In React, lifecycle methods allow you to manage the behaviour of components at different stages of their existence. One important lifecycle method for cleaning up resources and side effects is componentWillUnmount(). This method is called just before a component is removed from the DOM, making it an
5 min read
ReactJS UNSAFE_componentWillReceiveProps() Method The componentWillReceiveProps() is invoked before our mounted React component receives new props. It is called during the updating phase of the React Life-cycle. It is used to update the state in response to some changes in our props. We can't call this with initial props during mounting because Rea
3 min read
What is ComponentWillMount() method in ReactJS ? ReactJS requires several components to represent a unit of logic for specific functionality. The componentWillMount lifecycle method is an ideal choice when it comes to updating business logic, app configuration updates, and API calls. PrerequisitesReact JSReact JS class componentsComponentWillMoun
4 min read
ReactJS componentDidMount() Method In React, componentDidMount() is a lifecycle method in React that is called once a component has been rendered and placed in the DOM. This method is invoked only once during the lifecycle of a component, immediately after the first render, which is why it is useful for operations like fetching data,
7 min read
How to use componentWillMount() in React Hooks? The componentWillMount() method allows us to execute the React code synchronously when the component gets loaded or mounted in the DOM (Document Object Model). This method is called during the mounting phase of the React Life-cycle. You cannot use any of the existing React lifecycle methods like Com
2 min read
ReactJS componentDidUpdate() Method In React, lifecycle methods allow you to manage the behaviour of components at different stages of their existence. One important lifecycle method for handling actions after updates have occurred is componentDidUpdate(). This method is called immediately after a component’s updates are applied to th
5 min read
ReactJS componentDidCatch() Method The componentDidCatch() method is invoked if some error occurs during the rendering phase of any lifecycle methods or any children components. This method is used to implement the Error Boundaries for the React application. It is called during the commit phase, so unlike getDerivedStateFromError() w
2 min read
When is the componentWillUnmount method called? The componentWillUnmount() method allows us to execute the React code when the component gets destroyed or unmounted from the DOM (Document Object Model). This method is called during the Unmounting phase of the React Life-cycle i.e. before the component gets unmounted. Prerequisites:NPM & NodeR
2 min read
ReactJS isCompositeComponent() Method React.js library is all about splitting the app into several components. Each Component has its own lifecycle. React provides us some in-built methods that we can override at particular stages in the life-cycle of the component. In this article, we will see how to use isCompositeComponent() method.
2 min read