¿Cómo funciona useEffect en ReactJS?

Cuando queremos realizar algo después de cada procesamiento del componente, podemos usar el gancho useEffect(). Al usar este Hook, le decimos a React que nuestro componente necesita hacer algo después de renderizar pasando una función. React recuerda la función que pasamos en useEffect() hook y llámala más tarde después de realizar las actualizaciones de DOM.

De forma predeterminada, el enlace useEffect se ejecuta después del primer procesamiento y después de cada actualización. React actualiza el DOM en el momento en que ejecuta los efectos.

Creando la aplicación React:

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

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

  cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: App.js

import React, { useState, useEffect } from 'react';
  
function App() {
    
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    alert(`You clicked ${count} times`)
  });
  
  const handleUpdate = ()=> {
    setCount (count + 1)
  }
    
  return (
    <div>  
      <div>You have clicked {count} times</div>
      <button onClick={ handleUpdate} >
        Click me
      </button>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.

Explicación: Como podemos ver en el ejemplo anterior, cada vez que actualizamos el estado, React vuelve a renderizar el componente, y justo después de la función de llamada de gancho useEffect() que hemos pasado.