Hook useEffect

Que es useEffect?

useEffect te permite realizar "efectos secundarios" en componentes funcionales. Los efectos secundarios son operaciones que afectan algo fuera del componente: obtener datos, suscripciones, manipulacion manual del DOM, etc.

Sintaxis Basica

import { useEffect, useState } from 'react';

function Componente() {
  const [datos, setDatos] = useState(null);

  // Se ejecuta despues de cada renderizado
  useEffect(() => {
    console.log('Componente renderizado');
  });

  // Se ejecuta solo en el montaje (array vacio)
  useEffect(() => {
    console.log('Componente montado');
  }, []);

  // Se ejecuta cuando cambia una dependencia
  useEffect(() => {
    console.log('datos cambio:', datos);
  }, [datos]);

  return <div>{datos}</div>;
}

Obteniendo Datos

function ListaUsuarios() {
  const [usuarios, setUsuarios] = useState([]);
  const [cargando, setCargando] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const obtenerUsuarios = async () => {
      try {
        const respuesta = await fetch('https://api.ejemplo.com/usuarios');
        if (!respuesta.ok) throw new Error('Error al obtener datos');
        const datos = await respuesta.json();
        setUsuarios(datos);
      } catch (err) {
        setError(err.message);
      } finally {
        setCargando(false);
      }
    };

    obtenerUsuarios();
  }, []); // Array vacio = solo al montar

  if (cargando) return <p>Cargando...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {usuarios.map(usuario => (
        <li key={usuario.id}>{usuario.nombre}</li>
      ))}
    </ul>
  );
}

Funcion de Limpieza

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

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

    // Funcion de limpieza - se ejecuta al desmontar
    return () => {
      clearInterval(intervalo);
    };
  }, []);

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

// Limpieza con suscripciones
function EstadoConexion() {
  const [enLinea, setEnLinea] = useState(navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setEnLinea(true);
    const handleOffline = () => setEnLinea(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return <p>{enLinea ? 'En linea' : 'Desconectado'}</p>;
}

Dependencias

function BusquedaUsuario({ idUsuario }) {
  const [usuario, setUsuario] = useState(null);

  useEffect(() => {
    // Se ejecuta cuando idUsuario cambia
    const obtenerUsuario = async () => {
      const respuesta = await fetch(`/api/usuarios/${idUsuario}`);
      const datos = await respuesta.json();
      setUsuario(datos);
    };

    if (idUsuario) {
      obtenerUsuario();
    }
  }, [idUsuario]); // Dependencia: idUsuario

  return usuario ? <div>{usuario.nombre}</div> : null;
}