Introduccion a useEffect

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>

  );

}

Practica de portfolio

Convierte esta leccion en evidencia real: arma una entrega pequena que puedas mostrar en una entrevista, en LinkedIn o en tu portfolio. Trabaja con un caso propio o con una empresa ficticia, pero deja claro el problema, la decision y el resultado.

• Entregable: una captura, documento, repositorio o tablero con el resultado final.


• Checklist: objetivo, pasos seguidos, criterio de calidad y mejora pendiente.


• Mini-rubrica: si otra persona lo revisa, debe entender que hiciste, por que y como repetirlo.