Lección 11 de 13 · Lectura y práctica

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.

Del concepto a la práctica

Taller de esta lección

Un efecto es adecuado cuando React debe sincronizar algo externo al cálculo de la vista. Actualizar el título del documento es un caso pequeño y observable: el texto depende de un contador, pero el documento no forma parte del JSX retornado. La dependencia indica cuándo repetir la sincronización.

Ejemplo resuelto

jsx

import {useEffect,useState} from 'react';
function Lecturas() {
  const [leidas, setLeidas] = useState(0);
  useEffect(() => { document.title = `Leídas: ${leidas}`; }, [leidas]);
  return <button onClick={() => setLeidas(n => n + 1)}>{leidas}</button>;
}

El título empieza con Leídas: 0 y cambia a Leídas: 1 tras un clic.

Pruébalo

Crea el estado leidas con cero.
Añade el efecto con leidas como dependencia.
Incrementa mediante la función anterior.
Comprueba el título después de dos clics.

Comprueba tu resultado

Debe indicar Leídas: 2 tras dos clics.

Error frecuente: omitir leidas de dependencias y conservar un valor antiguo; corrígelo declarando la dependencia. No uses un efecto para construir un texto que ya puedes concatenar durante el render.

Sincronización y ciclo de vida

Importa useState y useEffect; el fragmento de Lecturas necesita ambos hooks. El efecto se ejecuta en el cliente después del commit y su momento respecto a la pintura depende del caso, por lo que no es una garantía universal de «después de cada render». Sin dependencias, sincroniza después de cada commit pertinente; [] no promete una única ejecución en desarrollo, donde Strict Mode puede añadir setup→cleanup→setup para probar simetría.

Dos clics generan estado2 y, después de sincronizarse, título Leídas:2. Para no dejar el título modificado al desmontar, instala un efecto independiente [] que capture el título anterior y lo restaure en su limpieza; mantenlo antes del efecto [leidas]. El título usa document, así que esta práctica requiere navegador; una función ejecutada en Node no aporta esa pantalla. No quites una dependencia que el código lee para silenciar el linter. Si solo necesitas mostrar Leídas:2 en un p, calcula ese texto en JSX y evita el efecto. La comprobación registra título inicial, título tras los eventos y título restaurado al ocultar el componente.

Montar agrega actualizar como listener, limpiar retira esa misma función y un nuevo montaje vuelve a un listener activo; los conteos siguen 0, 1, 0 y 1. — **Instalar y retirar el mismo listener**
El efecto registra un listener y su limpieza retira la misma función. Tras desmontar quedan cero suscripciones de ese componente; volver a montarlo instala una nueva sin acumular la anterior.
Ver la infografía en tamaño completo ↗

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>
  );
}

Sigue con React Fundamentals

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Ver curso y opciones de acceso Ya soy estudiante

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

← Anterior: Manejando multiples estados Siguiente: Limpieza en useEffect →Entrar y guardar mi progreso