10-Ejemplo Sencillo con useEffect

 Cómo utilizar useEffect en React: Guía completa

useEffect es uno de los Hooks más importantes en React, y entenderlo bien es clave para dominar el desarrollo con esta biblioteca. En este post te explico cómo y cuándo usarlo correctamente.

¿Qué es useEffect?

useEffect es un Hook que te permite realizar efectos secundarios en componentes funcionales. Reemplaza a los métodos del ciclo de vida (componentDidMount, componentDidUpdate, componentWillUnmount) de los componentes de clase.

jsx

Copy

Download

import { useEffect } from 'react';

function MiComponente() {
  useEffect(() => {
    // Código del efecto aquí
  }, [dependencias]);
  
  return /* JSX */;
}

Casos de uso comunes

1. Ejecutar código al montar el componente (componentDidMount)

jsx

Copy

Download

useEffect(() => {
  console.log('El componente se montó');
  // Puedes hacer llamadas API aquí
}, []); // Array de dependencias vacío

2. Ejecutar código cuando cambian ciertas props/estados (componentDidUpdate)

jsx

Copy

Download

useEffect(() => {
  console.log('El valor de "prop" cambió:', prop);
  // Realizar acciones cuando "prop" cambia
}, [prop]); // Incluye "prop" en las dependencias

3. Limpieza al desmontar (componentWillUnmount)

jsx

Copy

Download

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Tic tac');
  }, 1000);

  return () => {
    clearInterval(timer); // Limpieza
    console.log('Componente desmontado');
  };
}, []);

Errores comunes y cómo evitarlos

1. Olvidar las dependencias: Si usas valores dentro del efecto que pueden cambiar, inclúyelos en el array de dependencias.

2. Efectos que se ejecutan demasiado: Si no proporcionas un array de dependencias, el efecto se ejecutará en cada renderizado.

3. Bucles infinitos: Modificar un estado dentro de un efecto que depende de ese mismo estado sin condición de parada.

Consejos avanzados

• Usa múltiples efectos para separar preocupaciones

• Para llamadas API, considera cancelar solicitudes pendientes en la función de limpieza

• Usa useCallback y useMemo para optimizar dependencias

¿Te ha sido útil esta guía? ¿Tienes alguna duda sobre useEffect? ¡Déjame un comentario!

#React #Hooks #useEffect #FrontendDevelopment

Ejemplo Sencillo con useEffect - Contador + Efecto de Título

Vamos a crear un componente que:

1. ⏳ Lleve un contador que aumenta cada segundo.

2. ✏️ Actualice el título de la página con el valor del contador.

📝 Código Completo

jsx

Copy

Download

import { useState, useEffect } from "react";

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

  // 🎯 Efecto 1: Actualizar el título de la página
  useEffect(() => {
    document.title = `Contador: ${contador}`;
  }, [contador]); // Se ejecuta cada vez que `contador` cambia

  // 🎯 Efecto 2: Temporizador que incrementa el contador
  useEffect(() => {
    const intervalo = setInterval(() => {
      setContador((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(intervalo); // 🔄 Limpieza al desmontar
  }, []); // Se ejecuta solo al inicio (montaje)

  return (
    <div>
      <h1>Contador: {contador}</h1>
    </div>
  );
}

export default ContadorConTitulo;

---

🔍 Explicación Paso a Paso

1️⃣ Primer useEffect (Actualizar título)

javascript

Copy

Download

useEffect(() => {
  document.title = `Contador: ${contador}`;
}, [contador]); // Dependencia: `contador`

• ¿Qué hace? Cambia el título de la pestaña del navegador cada vez que contador cambia.

• ¿Por qué [contador]? Así solo se ejecuta cuando contador se actualiza.

2️⃣ Segundo useEffect (Temporizador)

javascript

Copy

Download

useEffect(() => {
  const intervalo = setInterval(() => {
    setContador((prev) => prev + 1);
  }, 1000);

  return () => clearInterval(intervalo); // Función de limpieza
}, []); // Sin dependencias (solo al montar)

• ¿Qué hace?

  • Ejecuta setInterval para aumentar contador cada segundo.

  • return () => clearInterval(intervalo) evita fugas de memoria al desmontar el componente.

• ¿Por qué []? Queremos que el intervalo se inicie solo una vez.

---

💡 ¿Qué Aprendiste?

✅ useEffect con dependencias → Se ejecuta cuando ciertas variables cambian.
✅ useEffect con [] → Se ejecuta solo al inicio (como componentDidMount).
✅ Función de limpieza (return) → Evita problemas al desmontar el componente.

---

📌 Posible Mejora (Parar el Contador)

Si quisieras pausar el contador, podrías añadir un botón:

jsx

Copy

Download

const [estaActivo, setEstaActivo] = useState(true);

useEffect(() => {
  if (!estaActivo) return; // Si está pausado, no hace nada
  
  const intervalo = setInterval(() => {
    setContador((prev) => prev + 1);
  }, 1000);

  return () => clearInterval(intervalo);
}, [estaActivo]); // Dependencia: `estaActivo`

return (
  <div>
    <h1>Contador: {contador}</h1>
    <button onClick={() => setEstaActivo(!estaActivo)}>
      {estaActivo ? "⏸️ Pausar" : "▶️ Reanudar"}
    </button>
  </div>
);

Nuevo comportamiento:

• El contador se pausa/reanuda al hacer clic.

• useEffect ahora depende de estaActivo y se reinicia cuando cambia.

---

🚀 Conclusión

Este ejemplo te muestra cómo usar useEffect para:

1. Sincronizar efectos con el estado (título de la página).

2. Manejar temporizadores (con limpieza adecuada).

3. Controlar efectos con dependencias (pausar/reanudar).

¡Practica modificando este código! Prueba añadir más efectos, como cambiar el color de fondo cuando el contador llega a 10. 😊