useEffect Hook ### ### Introducción ### El Hook useEffect permite manejar efectos secundarios en componentes funcionales. Un efecto secundario es cualquier operación que afecta algo fuera del ámbito de la función que está ejecutándose: peticiones a una API, suscripciones, cambios manuales en el DOM, etc. ### Sintaxis básica ### useEffect se invoca dentro del componente funcional y permite realizar un efecto secundario. javascript import React, { useState, useEffect } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); // Similar a componentDidMount y componentDidUpdate: useEffect(() => { // Actualiza el título del documento usando la API del navegdor document.title = `Has hecho clic ${count} veces`; }); return ( <div> <p>Has hecho clic {count} veces</p> <button onClick={() => setCount(count + 1)}> Haz clic aquí </button> </div> ); } ### Descripción del ejemplo ### En este ejemplo: - useEffect se llama después de renderizar el componente. En cada renderización, document.title será actualizado reflejando el número de clics. ### Cleanup en useEffect ### Para limpiar efectos (como anular suscripciones o temporizadores), useEffect puede retornar una función. javascript import React, { useState, useEffect } from 'react'; function Timer() { const [seconds, setSeconds] = useState(0); useEffect(() => { const interval = setInterval(() => { setSeconds(s => s + 1); }, 1000); return () => clearInterval(interval); // Cleanup el intervalo en el desmontaje o en la siguiente ejecución de `useEffect` }, []); return <div>Segundos: {seconds}</div>; } En este ejemplo, creamos un temporizador que se incrementa cada segundo. Cuando el componente se desmonta o antes de que se vuelva a ejecutar el efecto, el intervalo se limpiará con clearInterval. ### Dependencias del efecto ### Puedes controlar cuándo se activan los efectos pasando un array de dependencias como segundo argumento a useEffect. javascript import React, { useState, useEffect } from 'react'; function AlertComponent() { const [count, setCount] = useState(0); const [alertCount, setAlertCount] = useState(0); useEffect(() => { setAlertCount(alertCount + 1); // Solo se ejecutará cuando `alertCount` cambie }, [alertCount]); return ( <div> <p>Has hecho clic {count} veces</p> <button onClick={() => setCount(count + 1)}> Haz clic aquí </button> <p>Alert count: {alertCount}</p> <button onClick={() => setAlertCount(alertCount + 1)}> Incrementar Alert Count </button> </div> ); } En este ejemplo, useEffect solo se ejecuta cuando alertCount cambia, a diferencia de ejecutarse después de cada renderización. ### Cuando pasa un array vacío ### Pasar un array vacío [] como segundo argumento hace que el efecto solo se ejecute una vez, similar a componentDidMount. javascript useEffect(() => { // Lógica para ejecutar una vez durante el montaje }, []); [Placeholder para imagen sobre el flujo de trabajo de useEffect: Diagrama que muestra cómo se ejecutan efectos después de cada render, cleaned up antes de que se apliquetes efectos nuevamente, y cómo el array de dependencias afecta este comportamiento.]