useEffect: Efectos secundarios

useEffect te permite ejecutar codigo despues de que React actualiza el DOM. Se usa para efectos secundarios como:

• Llamadas a APIs
• Suscripciones
• Manipulacion manual del DOM
• Timers

Sintaxis basica

import { useEffect, useState } from 'react';

function Componente() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Este codigo se ejecuta despues del render
    console.log('Componente renderizado!');
  });

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

Array de dependencias

// Se ejecuta en CADA render
useEffect(() => {
  console.log('Cada render');
});

// Se ejecuta SOLO al montar
useEffect(() => {
  console.log('Solo al montar');
}, []);

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

// Se ejecuta cuando cambia 'a' O 'b'
useEffect(() => {
  console.log('a o b cambiaron');
}, [a, b]);

Ejemplo: Fetch de datos

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);

    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
  }, [userId]); // Re-fetch cuando cambia userId

  if (loading) return <p>Cargando...</p>;

  return <h1>{user.name}</h1>;
}

Ejemplo: Titulo del documento

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Contador: ${count}`;
  }, [count]);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count}
    </button>
  );
}