¿Cómo usar componentWillMount() en React Hooks?

El método componentWillMount() nos permite ejecutar el código React sincrónicamente cuando el componente se carga o monta en el DOM (Document Object Model). Este método se llama durante la fase de montaje del ciclo de vida de React.

No puede usar ninguno de los métodos de ciclo de vida de React existentes como ComponentDidMount, ComponentWillUnmount, etc. en un componente basado en gancho. Para usar la funcionalidad de los métodos basados ​​en clases, los ganchos de React ofrecen una alternativa como useEffect Hook para el componenteDidMount, el componenteDidUpdate y el componenteWillUnmount combinados, pero para el componenteWillMount(), no se proporciona tal gancho ni siquiera en los React Docs oficiales.

ComponentWillMount() quedará obsoleto en las versiones futuras de React según este problema . Se sugiere usar ComponentDidMount() o useEffect hook como su alternativa, pero aún puede usar ComponentWillMount() llamándolo UNSAFE_ComponentWillMount().

ComponentWillMount() generalmente se usa para mostrar un cargador cuando se carga el componente o cuando se obtienen los datos del servidor, pero una vez que se desactive por completo, podemos usar SuspenseAPI como una mejor alternativa.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app functiondemo

Paso 2: después de crear la carpeta de su proyecto, es decir, functiondemo, muévase a ella usando el siguiente comando:

cd functiondemo

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: en este ejemplo, vamos a crear una aplicación que registre el mensaje cuando el componente se represente en el árbol DOM.

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

Usando el método componentWillMount():

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;

Alternativa usando el método useLayoutEffect():

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;

Nota: Puede definir su propio estilo en el archivo App.css.

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción: 

Producción