useEffect - Efectos Secundarios

useEffect es el puente entre React y el mundo exterior. Imagínalo como un asistente que actúa después de que React termina de actualizar la pantalla: "Ya mostré los cambios, ¿qué más debo hacer?" Sirve para tareas con efectos fuera del componente: pedir datos a una API, configurar un timer, sincronizar con LocalStorage, o suscribirse a eventos. Sin useEffect, hacer estas cosas durante el render causaría errores y comportamiento impredecible.

El array de dependencias controla cuándo se ejecuta el efecto. Sin array: se ejecuta en cada render. Con array vacío []: solo al montar el componente (una vez). Con valores [dep1, dep2]: se ejecuta cuando cualquiera de esas dependencias cambia.

La función de cleanup que retornas se ejecuta antes de que el componente se desmonte o antes del siguiente efecto, como apagar la estufa antes de salir: evita memory leaks en timers y suscripciones.

import { useState, useEffect } from "react";

function Usuarios() {
  const [usuarios, setUsuarios] = useState([]);
  const [cargando, setCargando] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    // Se ejecuta después del primer render
    const cargar = async () => {
      try {
        const resp = await fetch("https://jsonplaceholder.typicode.com/users");
        const datos = await resp.json();
        setUsuarios(datos);
      } catch (err) {
        setError(err.message);
      } finally {
        setCargando(false);
      }
    };
    cargar();
  }, []); // [] = ejecutar solo una vez (al montar)
  
  // Dependencias: re-ejecuta cuando cambia "busqueda"
  const [busqueda, setBusqueda] = useState("");
  const [resultados, setResultados] = useState([]);
  
  useEffect(() => {
    if (!busqueda) return;
    const filtrados = usuarios.filter(u =>
      u.name.toLowerCase().includes(busqueda.toLowerCase())
    );
    setResultados(filtrados);
  }, [busqueda, usuarios]); // Dependencias
  
  // Cleanup - se ejecuta antes de desmontar
  useEffect(() => {
    const id = setInterval(() => console.log("tick"), 1000);
    return () => clearInterval(id); // Cleanup!
  }, []);
  
  if (cargando) return <p>Cargando...</p>;
  if (error) return <p>Error: {error}</p>;
  return <ul>{usuarios.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}