¿Cuál es el uso más apropiado de useEffect?

useEffect está pensado para sincronización con sistemas externos al render de React.

useEffect y ciclo de vida mental en componentes funcionales

Comprende cuándo y por qué se ejecuta useEffect para sincronizar React con APIs, temporizadores y otras fuentes externas.

¿Cuánto sabes de React?

📘 Teoría

Cuándo sí usar useEffect

Solo cuando interactúas con algo fuera del árbol de React.

Casos típicos: cargar datos desde API, conectar un websocket, registrar un event listener global o manejar intervalos.

Si necesitas actualizar estado en base a props, primero evalúa si puede resolverse con cálculo directo en render.

Un effect innecesario añade renders extra y complejidad accidental.

Sincronización con red y backend.
Integración con APIs del navegador.
Suscripciones y temporizadores.
Evitar duplicar estado derivable.

Cómo piensa React la ejecución

Effect con dependencias se re-ejecuta cuando alguna dependencia cambia entre renders.

Effect dependiente de un valor

import { useEffect, useState } from 'react';

function Perfil({ userId }) {
  const [nombre, setNombre] = useState('');

  useEffect(() => {
    // sincronizar con API externa
    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data) => setNombre(data.nombre));
  }, [userId]);

  return <h2>{nombre}</h2>;
}

Errores comunes con useEffect

Muchos bugs de React vienen de efectos mal modelados.

No declarar dependencias reales genera datos obsoletos y comportamiento inconsistente.

Meter demasiada lógica dentro de un único effect dificulta depuración y mantenimiento.

Actualizar estado sin condición dentro de un effect puede disparar bucles de render.

1 Cuándo sí usar useEffect 2 Cómo piensa React la ejecución 3 Errores comunes con useEffect

🧪 Aprende probando

Ejemplo Ejemplo: sincronizar título de la pestaña Caso clásico de sincronización con API externa del navegador (document.title).

⌄

🏁 Retos

Reto Reto: dispara effect cuando cambie `query` Completa dependencias para que el efecto se ejecute cuando cambie el término de búsqueda.

⌄

🧰 Recursos

Enlaces útiles

Synchronizing with Effects You Might Not Need an Effect Lifecycle of Reactive Effects

Test

Comprueba tus conocimientos con un test sobre React.

Test de React

Recursos del curso 25

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards

‹

Lección 06

Eventos y estado local con useState

Lección 08

useEffect: dependencias, cleanup y prevención de fugas

›