Cuando trabajas con React, uno de los hooks más importantes que debes dominar es useEffect. Este hook te permite manejar efectos secundarios en tus componentes funcionales, algo esencial para crear aplicaciones dinámicas e interactivas. En este post, te explicaré de manera sencilla qué es useEffect, cómo funciona, y te mostraré algunos ejemplos prácticos.

¿Qué es useEffect?

useEffect es un hook en React que se utiliza para manejar efectos secundarios, es decir, cualquier cosa que ocurra fuera del flujo de renderizado de React, como llamadas a APIs, suscripciones a eventos, o modificaciones directas del DOM.

Concepto Básico

useEffect te permite ejecutar código después de que el componente se ha renderizado. Es como decirle a React: “Cuando termines de pintar la pantalla, haz esto.”

Sintaxis

    useEffect(() => {
    // Aquí va el código del efecto.
    return () => {
        // Opcionalmente, puedes devolver una función de limpieza.
    };
    }, [dependencias]);

• Función principal: Se ejecuta después de que el componente se ha montado o actualizado.
• Función de limpieza (opcional): Se ejecuta antes de que el componente se desmonte o antes de volver a ejecutar el efecto si cambian las dependencias.
• Dependencias: Un arreglo que contiene variables que, al cambiar, provocan la reejecución del efecto. Si está vacío, el efecto se ejecuta solo una vez, similar a componentDidMount en componentes de clase.

Ejemplos Prácticos

1. Ejecutar un efecto al montar el componente (sin dependencias)

    import React, { useEffect } from 'react';

    function MiComponente() {
    useEffect(() => {
        console.log('Componente montado');
    }, []); // [] asegura que solo se ejecuta una vez

    return <div>Hola Mundo</div>;
    }

En este ejemplo, el efecto se ejecuta solo una vez cuando el componente se monta por primera vez, gracias al arreglo de dependencias vacío ( [ ] ).

2. Ejecutar un efecto cuando cambia una variable (con dependencias)

    import React, { useState, useEffect } from 'react';

    function Contador() {
        const [contador, setContador] = useState(0);

        useEffect(() => {
            console.log('El contador ha cambiado:', contador);
        }, [contador]); // Se ejecuta cada vez que 'contador' cambia

        return (
            <div>
            <p>Contador: {contador}</p>
            <button onClick={() => setContador(contador + 1)}>Incrementar</button>
            </div>
        );
    }

Aquí, useEffect se ejecuta cada vez que el estado contador cambia, lo que es ideal para manejar efectos dependientes de cambios específicos en tu componente.

3. Limpieza de un efecto (ejemplo con temporizador)

    import React, { useState, useEffect } from 'react';

    function Temporizador() {
    const [segundos, setSegundos] = useState(0);

    useEffect(() => {
        const intervalo = setInterval(() => {
        setSegundos(segundos => segundos + 1);
        }, 1000);

        return () => clearInterval(intervalo); // Limpieza del intervalo al desmontar el componente
    }, []);

    return <div>Segundos: {segundos}</div>;
    }

En este caso, el temporizador se limpia automáticamente cuando el componente se desmonta, gracias a la función de limpieza que retorna clearInterval.