Hook useEffect

useEffect le dice a tu componente que haga algo después de aparecer en pantalla — como cargar datos de internet, iniciar un temporizador o escuchar actualizaciones. Cuando React monta tu componente (aparece por primera vez en pantalla), ahí es cuando los efectos empiezan a correr.

useEffect(() => {
  fetchUserProfile();
}, []);

El arreglo de dependencias

El segundo argumento controla cuándo se ejecuta el efecto:

// Se ejecuta UNA VEZ después del primer renderizado (montaje)
useEffect(() => {
  loadData();
}, []);

// Se ejecuta cuando cambia `count`
useEffect(() => {
  console.log(`El conteo cambió a: ${count}`);
}, [count]);

// Se ejecuta después de CADA renderizado (generalmente es un error)
useEffect(() => {
  // ¡Ten cuidado con esto!
});

Funciones de limpieza

Retorna una función para hacer limpieza cuando el componente se desmonta (se quita de la pantalla) o antes de volver a ejecutar el efecto:

useEffect(() => {
  const timer = setInterval(() => tick(), 1000);

  // Limpieza: detener el temporizador
  return () => clearInterval(timer);
}, []);

Esto previene fugas de memoria (sigue haciendo trabajo para un componente que ya no existe) — una fuente común de bugs en apps móviles.

Patrones comunes en Expo

// Cargar datos al montar
useEffect(() => {
  async function load() {
    const response = await fetch(API_URL);
    const data = await response.json();
    setItems(data);
  }
  load();
}, []);

Intenta esto: Agrega un useEffect que muestre "¡Componente montado!" cuando la pantalla cargue, y "¡Adiós!" cuando se desmonte.