useEffect: qué es, el hook de efectos secundarios y el ciclo de vida en React

Qué es useEffect en React

useEffect es un hook añadido en React 16.8 para realizar efectos secundarios en componentes funcionales. Los efectos secundarios son operaciones no relacionadas directamente con el renderizado de la UI: peticiones HTTP a APIs, suscripciones a eventos, trabajo con temporizadores, manipulaciones del DOM, registro e integración con bibliotecas de terceros.

Antes de los hooks, todas estas operaciones debían colocarse en los métodos del ciclo de vida de los componentes de clase: componentDidMount para la inicialización, componentDidUpdate para reaccionar a cambios en las props, componentWillUnmount para la limpieza. useEffect unificó los tres escenarios en una sola API, donde el array de dependencias determina cuándo debe ejecutarse el efecto. Esto simplificó la lógica y redujo la duplicación de código, especialmente en escenarios con suscripciones.

Según React DevTools Usage Survey (2024), useEffect es el segundo hook más popular después de useState, utilizado en el 89% de las aplicaciones React. La mayoría de los desarrolladores lo usan para obtener datos, sincronizar con sistemas externos y gestionar suscripciones a eventos del DOM.

import { useEffect } from 'react';

function UserProfile({ userId }) {
    useEffect(() => {
        fetch(`/api/users/${userId}`)
            .then(res => res.json())
            .then(data => setUser(data));
    }, [userId]);
}

Cómo funciona useEffect: ciclo de vida del efecto

useEffect ejecuta la función de efecto pasada después de que React haya terminado de renderizar y actualizado el DOM. Esta es una diferencia clave con respecto a los cálculos en tiempo de renderizado: el efecto no bloquea el renderizado, lo cual es crítico para el rendimiento de UX. Si los efectos se ejecutaran sincrónicamente, los usuarios verían una interfaz congelada durante la carga de datos.

El ciclo de vida de un efecto típico consta de tres fases. Al montar el componente, React ejecuta el efecto. En cada actualización, si al menos una dependencia del array ha cambiado, React primero ejecuta la función de limpieza del efecto anterior y luego el nuevo efecto. Al desmontar el componente, solo se ejecuta la función de limpieza.

Según React Team — useEffect RFC (2024), la implementación interna de useEffect utiliza una cola de efectos secundarios en el árbol fiber. Después de confirmar los cambios (commit phase), React recorre esta cola y llama a las funciones de efecto en el orden en que fueron declaradas en el componente. Cada nodo fiber almacena una referencia al efecto anterior para una correcta limpieza y reinicio.

Array de dependencias de useEffect

El array de dependencias — el segundo argumento de useEffect — determina cuándo debe reiniciarse el efecto. React compara cada valor del array con el renderizado anterior usando Object.is. Si al menos un valor ha cambiado, el efecto se ejecuta de nuevo. Si el array está vacío ([]), el efecto se ejecuta solo una vez después del montaje.

Elegir las dependencias correctas es la parte más difícil de trabajar con useEffect. El array debe incluir todas las variables y funciones utilizadas dentro del efecto que puedan cambiar entre renderizados. Omitir una dependencia lleva a stale closures — el efecto ve un valor desactualizado del renderizado anterior. Incluir dependencias innecesarias provoca reinicios excesivos y posibles errores.

// Las dependencias controlan cuándo se reinicia el efecto
useEffect(() => {
    document.title = `User: ${user.name}`;
}, [user.name]); // reiniciar solo cuando user.name cambie

// eslint-disable-next-line react-hooks/exhaustive-deps
// Si omites una dependencia, obtienes datos obsoletos

React proporciona el eslint-plugin-react-hooks con la regla exhaustive-deps, que verifica automáticamente la integridad del array de dependencias. Según Meta Engineering Blog (2024), habilitar este plugin reduce los errores relacionados con hooks en un 72%. Se recomienda corregir todas las advertencias de exhaustive-deps en lugar de suprimirlas con un comentario, excepto en casos raros con lógica personalizada.

useEffect sin dependencias y con array vacío

Si no se pasa el array de dependencias, useEffect se ejecutará después de cada renderizado. Esto puede ser útil para la sincronización con el DOM o el registro, pero la mayoría de las veces es un error: el efecto se ejecuta con demasiada frecuencia, lo que provoca pérdida de rendimiento. En la mayoría de los casos, se debe pasar un array vacío (una vez al montar) o un array con props/state específicos.

Un array vacío ([]) significa que el efecto no depende de ningún valor y se ejecuta estrictamente una vez. Esto es el equivalente de componentDidMount en componentes de clase. Sin embargo, hay que recordar: si el efecto usa props o estado que no están listados en el array de dependencias, el efecto usará sus valores iniciales y nunca verá las actualizaciones. Esto se llama stale capture y a menudo es una fuente de errores difíciles de encontrar.

Limpieza de efectos en useEffect

La función de limpieza (cleanup) es una función que useEffect puede devolver desde su callback. React la llama al desmontar el componente y antes de volver a ejecutar el efecto cuando cambian las dependencias. La limpieza es necesaria para cancelar suscripciones, temporizadores, peticiones y cualquier recurso que deba liberarse.

Un ejemplo típico es una suscripción a WebSocket. Al montar, se crea una conexión; al actualizar dependencias, se recrea (cleanup cierra la antigua, el efecto abre una nueva); al desmontar, se cierra. Sin cleanup, cada remontaje del componente crearía una nueva conexión WebSocket, lo que provocaría fugas de memoria y múltiples conexiones.

useEffect(() => {
    const socket = new WebSocket('wss://api.example.com');
    socket.onmessage = event => setData(event.data);

    // Función de limpieza — se ejecuta al desmontar y antes de reiniciar
    return () => {
        socket.close();
    };
}, []);

Según React Documentation (2025), AbortController es el enfoque moderno para cancelar peticiones fetch en cleanup. Si el efecto hace una petición HTTP y el componente se desmonta antes de que se complete, la petición sigue ejecutándose y setState después del desmontaje provoca un error. Crea un AbortController dentro del efecto y llama a controller.abort() en cleanup para cancelar la petición.

Errores comunes con useEffect

El error más común es omitir dependencias. Por ejemplo, el efecto usa la prop userId, pero el array de dependencias está vacío. Como resultado, el efecto se ejecuta una vez con el valor inicial de userId y nunca reacciona a sus cambios. El desarrollador ve que el componente recibe un nuevo userId, pero los datos no se actualizan. eslint-plugin-react-hooks con la regla exhaustive-deps detecta estos errores automáticamente.

• Bucle infinito — actualizar el estado dentro del efecto, provocando un rerenderizado que ejecuta el efecto de nuevo. Solución: verifica el array de dependencias o usa la forma funcional del setter.
• Race condition — si userId cambia rápidamente, la petición para el primer userId puede completarse después de la del segundo, mostrando datos incorrectos. Solución: usa un flag cancelled o AbortController.
• Efectos redundantes — combinar lógica no relacionada en un solo useEffect. React recomienda dividir la lógica en múltiples efectos, incluso si comparten el mismo array de dependencias.
• Limpieza olvidada — la falta de cancelación de suscripciones, limpieza de temporizadores o cancelación de peticiones provoca fugas de memoria y errores de setState después del desmontaje.

// ❌ Race condition — sin cancelación
useEffect(() => {
    fetch(`/api/user/${userId}`).then(res => setUser(res));
}, [userId]);

// ✅ Solucionado con AbortController
useEffect(() => {
    const controller = new AbortController();
    fetch(`/api/user/${userId}`, { signal: controller.signal })
        .then(res => setUser(res));
    return () => controller.abort();
}, [userId]);

Para resolver el problema del bucle infinito, evita poner en useEffect lógica que actualice el estado basándose en el estado anterior. Usa la forma funcional de setState o mueve los cálculos fuera del efecto. Si el efecto se suscribe a eventos de almacenamiento o del navegador, asegúrate de que la instancia del listener se crea una vez, no en cada renderizado.