How to use componentWillMount() in React Hooks?

09 Feb, 2021
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 ComponentDidMount, ComponentWillUnmount, etc. in a hook based component. To use the functionality of the class-based methods, React hooks provides the alternative like useEffect Hook for componentDidMount, componentDidUpdate, and componentWillUnmount combined but for componentWillMount(), no such hook is provided even in the official React Docs.
ComponentWillMount() will go to be deprecated in the future releases of the React as per this issue. It is suggested to use ComponentDidMount() or useEffect hook as its alternative but you can still use ComponentWillMount() by calling it as UNSAFE_ComponentWillMount().
ComponentWillMount() is generally used to show a loader when the component is being loaded or when the data from the server is being fetched but once it will get completely deprecated then we can use SuspenseAPI as a better alternative.
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app functiondemo
Step 2: After creating your project folder i.e. functiondemo, move to it using the following command:
cd functiondemo
Project Structure: It will look like the following.
Project Structure
Example: In this example, we are going to build an application that logs the message when the component is rendered in the DOM tree.
App.js: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Using componentWillMount() Method:
Javascript
import React from 'react';  class ComponentOne extends React.Component {  UNSAFE_componentWillMount() {    console.log('Component is mounted in the DOM');  }  render() {    return <h1>Hello Geeks!</h1>;  }}  class App extends React.Component {  render() {    return (      <div>        <ComponentOne />      </div>    );  }}  export default App;
Alternative Using useLayoutEffect() Method:
Javascript
import React, { useLayoutEffect } from 'react';  const ComponentOne = () => {  // Defining the useLayoutEffect hook  useLayoutEffect(() => {    console.log('Component is mounted in the DOM');  }, []);    return <h1>Hello Geeks!</h1>;};  const App = () => {  return (    <div>      <ComponentOne />    </div>  );};  export default App;
Note: You can define your own styling in the App.css file.
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: 
Output
Picked
React-Questions
ReactJS
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Axios in React: A Guide for Beginners
ReactJS useNavigate() Hook
How to install bootstrap in React.js ?
How to create a multi-page website using React.js ?
How to do crud operations in ReactJS ?
How to Use Bootstrap with React?
React-Router Hooks
How to navigate on path by button click in react router ?
How to check the version of ReactJS ?
Destructuring of Props in ReactJS