React posee varios hooks para poder dar toda su magia. Ya vimos el del estado, ahora en este capitulo vamos a ver el de efecto. Para esto necesitamos el hook useEffect. Este hook nos permite ejecutar el código que nosotros deseemos cuando el componente se monte en el DOM y cada vez que cambien las dependencias que nosotros le digamos. Su sintaxis es la siguiente:

useEffect(elCodigoQueQueremosUsar, laListaDeDependencias)

Un ejemplo practico podría ser este

useEffect(()=>{
    console.log("El código a ejecutarse");
  })

ATENTI

useEffect siempre tiene que ir en el cuerpo de la aplicacion, es decir dentro de la function App(). A menos que estemos hablando de un custom hook, por lo que irá dentro del mismo.

Uso de dependencias

El concepto mas extraño a la hora de utilizar el hook useEffect es el concepto de lista de dependencias. Con lista de dependencias nos referimos a los supuestos en los que nosotros queremos ejecutar ese código que hemos creado. Hay diferentes metodos para llamar a estas dependencias pero todos coinciden en que como argumento al useEffect debemos pasarle un array

Pasarle un array vacio

Es posible pasarle un array vacio al useEffect. Esto no tendra el mismo efecto que no pasarle ningun argumento. Al pasarle un array vacio, el código se ejecutará solamente cuando el componente se monta en el DOM.

useEffect(()=>{
    console.log("El código a ejecutarse");
  }, []);

Pasarle un array con dependencias

Si bien ya vimos que pasa si no le pasamos dependencias o si le pasamos un array vacio, el jugo del useEffect está en cuando le pasamos dependencias. Volvamos al caso del card component de Twitter que vimos en el capitulo de estados. Recordemos que cuando vos haces clic en el boton, el estado de isFollowing pasa de false a true. Supongamos que queremos ejecutar un código cada vez que el estado cambie

useEffect(()=>{
    console.log("El código a ejecutarse");
  }, [isFollowing]);

Limpiar el efecto

Los useEffects permiten devolver una funcion para “limpiar” el efecto, es decir, para que cuando cambie lo que nos interesa vuelva todo a estar como antes. Tomemos el caso del isFollowing. En el ejemplo de arriba queremos que el codigo se ejecute cuando isFollowing es true. Sin embargo, es necesario “limpiar” el efecto para poder ejecutarlo antes de nuevo. Eso se hace de la siguiente manera

useEffect(()=>{
    console.log("El código a ejecutarse");
		return ()=>{
			//bloque de codigo que queremos que se ejecute al momento de cambiar
			//por ejemplo, eliminar un event listener
}
  }, [isFollowing]);

¿Por que el efecto se ejecuta dos veces al cargarse?

Notaste que al hacer console log de “El codigo a ejecutarse” cuando se monta el componente este se carga dos veces. La razón está en tu main.jsx

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)