useEffect: efectos secundarios y sincronización de datos

⚙️ useEffect: efectos secundarios y sincronización de datos en React

El Hook useEffect permite manejar efectos secundarios en componentes funcionales de React. Los efectos secundarios son acciones que ocurren fuera del flujo normal de renderizado, como:

• 🔄 Llamadas a una API o servidor externo.
• 🧭 Suscripciones a eventos (scroll, teclado, WebSocket, etc.).
• 💾 Manipulación del DOM o almacenamiento local (localStorage).

useEffect reemplaza los métodos del ciclo de vida clásicos como componentDidMount, componentDidUpdate y componentWillUnmount.

---

1️⃣ Sintaxis básica de useEffect

import React, { useState, useEffect } from "react";

function Ejemplo() {
  const [contador, setContador] = useState(0);

  useEffect(() => {
    console.log("El componente se ha renderizado o el contador cambió");
  }, [contador]);

  return (
    <div>
      <p>Has hecho clic {contador} veces</p>
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
    </div>
  );
}

export default Ejemplo;
  

Contador con efecto

Has hecho clic 0 veces.

En este ejemplo, el efecto se ejecuta cada vez que cambia el valor de contador. Si el array de dependencias ([contador]) está vacío, el efecto solo se ejecuta una vez al montar el componente.

---

2️⃣ Ejecutar un efecto solo una vez (al montar)

Si pasamos un array vacío como segundo parámetro, el efecto solo se ejecuta una vez —similar a componentDidMount.

useEffect(() => {
  console.log("El componente se montó una sola vez");
}, []); // Se ejecuta solo al montar
  

💡 Ideal para: cargar datos iniciales desde una API o configurar listeners.

---

3️⃣ Limpiar efectos (cleanup)

Algunos efectos deben limpiarse al desmontar el componente, por ejemplo: eliminar un temporizador, cancelar una suscripción o limpiar un evento del DOM.

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Ejecutando tarea...");
  }, 1000);

  // Función de limpieza
  return () => clearInterval(timer);
}, []);
  

⏱️ Temporizador activo

Observa en consola cómo se ejecuta un mensaje cada segundo (simulado).

💡 Al desmontar el componente, el intervalo se limpia automáticamente.

---

4️⃣ Ejemplo: obtener datos desde una API

Uno de los usos más comunes de useEffect es realizar solicitudes HTTP para cargar datos al inicio del componente.

import React, { useEffect, useState } from "react";

function Usuarios() {
  const [usuarios, setUsuarios] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsuarios(data));
  }, []);

  return (
    <ul>
      {usuarios.map(usuario => (
        <li key={usuario.id}>{usuario.name}</li>
      ))}
    </ul>
  );
}

export default Usuarios;
  

📋 Lista de usuarios (simulada)

• Leanne Graham
• Ervin Howell
• Clementine Bauch

---

5️⃣ Resumen de buenas prácticas

• ✅ Coloca useEffect dentro del cuerpo del componente, nunca dentro de condicionales.
• ✅ Usa dependencias correctamente: si un valor se usa dentro del efecto, inclúyelo en el array de dependencias.
• ⚠️ Limpia efectos para evitar fugas de memoria (intervalos, listeners, etc.).
• 🚀 Usa varios efectos si tus tareas son independientes.

---

6️⃣ Resumen

useEffect permite que tus componentes sincronicen su estado con el mundo exterior. Con él puedes ejecutar código después del renderizado, escuchar cambios, cargar datos o limpiar recursos.

• 🔁 Se ejecuta después de cada render (por defecto).
• 🧭 Controla cuándo ejecutarlo con el array de dependencias.
• 🧹 Puede devolver una función de limpieza opcional.

---

← Volver al índice