useEffect de React

 ¿Para qué se usa useEffect?

¡Claro! Si useCallback se encarga de memoizar (recordar) funciones, el hook useEffect es la herramienta clave en React para manejar los efectos secundarios de tu aplicación.

---

El Objetivo Principal de useEffect

useEffect se utiliza para sincronizar tu componente con un sistema externo o realizar operaciones que no forman parte del proceso normal de renderizado de React (la representación de la UI).

En resumen, useEffect te permite "salir" del flujo de React para interactuar con el mundo exterior.

¿Qué es un Efecto Secundario?

Un efecto secundario es cualquier acción que afecta algo fuera de la función de renderizado del componente. Los ejemplos más comunes son:

1. Llamadas de Red (APIs): Obtener datos del servidor.

2. Suscripciones: Configurar oyentes de eventos globales, como cambios de tamaño de ventana o el estado de autenticación.

3. Manipulación Manual del DOM: Actualizar el título de la página (document.title) o integrar librerías de terceros (como D3 o Three.js) que manipulan elementos del DOM.

4. Timers: Usar setTimeout o setInterval.

---

¿Cómo funciona useEffect?

El hook toma dos argumentos:

1. La Función de Efecto (callback): El código que quieres ejecutar.

2. El Array de Dependencias ([deps]): Una lista de valores (variables, props, estados) que React debe observar.

Sintaxis

JavaScript

useEffect(() => {
  // 1. Código del efecto secundario

  return () => {
    // 2. Función de limpieza (opcional)
  };
}, [dependencia1, dependencia2]); // 3. Array de dependencias

1. La Función de Efecto (¿Cuándo se ejecuta?)

Esta función se ejecuta después de que el componente ha sido renderizado e inyectado en el DOM.

2. La Función de Limpieza (Cleanup)

Si tu efecto secundario realiza una acción que consume recursos o puede causar fugas de memoria (como configurar un timer o una suscripción), debes devolver una función de limpieza dentro del useEffect.

La limpieza se ejecuta:

• Antes de que el componente se desmonte del DOM.

• Antes de ejecutar el efecto de nuevo (si las dependencias cambian).

3. El Array de Dependencias (El Control Clave)

El array de dependencias es lo que controla el comportamiento de useEffect. Es el mecanismo de React para evitar que el efecto se ejecute innecesariamente en cada renderizado, lo cual causaría graves problemas de rendimiento.

Existen tres casos principales:

Array de Dependencias	Comportamiento	Uso Principal
[] (Array Vacío)	El efecto se ejecuta solo una vez, después del renderizado inicial.	Inicialización, llamadas API de una sola vez, configuración de suscripciones globales.
[a, b] (Con Valores)	El efecto se ejecuta en el montaje inicial Y cada vez que alguno de los valores (a o b) cambia.	Fetch de datos condicionales (ej. recargar la lista si el ID de usuario cambia).
(Omitido)	El efecto se ejecuta en el montaje inicial Y después de CADA renderizado del componente.	Uso poco común; generalmente solo para depuración o tareas que realmente necesitan ejecutarse constantemente.

---

Ejemplo Práctico: Fetching de Datos

Este es el caso de uso más común. Queremos cargar los datos de un usuario tan pronto como el componente se muestre, y solo si el userId cambia.

JavaScript

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

function PerfilUsuario({ userId }) {
  const [datos, setDatos] = useState(null);
  const [cargando, setCargando] = useState(true);

  // El efecto se ejecuta:
  // 1. Al montar el componente (userId !== undefined).
  // 2. Cada vez que la prop 'userId' cambie.
  useEffect(() => {
    setCargando(true);
    setDatos(null);
    console.log(`[EFFECT] Cargando datos para el usuario: ${userId}`);

    // Simulación de una llamada API
    const fetchDatos = setTimeout(() => {
      setDatos({ nombre: `Usuario ${userId}`, edad: 30 });
      setCargando(false);
    }, 1000);

    // FUNCIÓN DE LIMPIEZA
    // Si el 'userId' cambia antes de que el timer termine,
    // esta función limpia el timer para evitar actualizar un estado obsoleto.
    return () => {
      clearTimeout(fetchDatos);
      console.log(`[CLEANUP] Limpiando el fetch anterior para el usuario: ${userId}`);
    };
  }, [userId]); // <--- Dependencia clave

  if (cargando) return <p>Cargando perfil...</p>;
  if (!datos) return <p>No se encontraron datos.</p>;

  return (
    <div>
      <h2 className="text-xl font-semibold">Perfil de {datos.nombre}</h2>
      <p>Edad: {datos.edad}</p>
    </div>
  );
}

En este ejemplo, useEffect asegura que la lógica de la API se ejecute solo cuando es necesario (cuando userId cambia) y limpia la solicitud pendiente si el componente se desmonta o se necesita cargar un nuevo usuario.