10-Tutorial de useEffect en React: Guía para Principiantes

 

Tutorial de useEffect en React: Guía para Principiantes

(Perfecto para tu blog – Ejemplos claros y prácticos)

¿Quieres manejar efectos secundarios en tus componentes de React, como llamadas a APIs, suscripciones o manipulación del DOM? useEffect es el hook esencial para eso. En este tutorial, te explico paso a paso cómo usarlo con ejemplos fáciles de entender.

---

🔹 ¿Qué es useEffect?

useEffect es un hook de React que te permite ejecutar código después de que el componente se renderiza (o cuando ciertas dependencias cambian). Es ideal para:

• Llamadas a APIs.

• Suscripciones a eventos (ej: scroll, resize).

• Manipular el DOM directamente.

• Limpiar recursos (ej: timeouts, intervalos).

---

🛠️ Sintaxis Básica

jsx

import { useEffect } from 'react';

function MiComponente() {
  useEffect(() => {
    // Código que se ejecuta después del render
    console.log("El componente se renderizó");

    // Función de limpieza (opcional)
    return () => {
      console.log("Limpieza antes de desmontar");
    };
  }, []); // Dependencias (si están vacías, se ejecuta solo una vez)
}

---

🚀 4 Casos de Uso Prácticos

1. Llamar una API al cargar el componente

jsx

import { useState, useEffect } from 'react';

function ListaDePosts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => setPosts(data));
  }, []); // Se ejecuta solo una vez al montar

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

¿Por qué el [] como dependencia?

• Así evitamos que se repita la llamada en cada render.

---

2. Actualizar el título de la página

jsx

import { useEffect } from 'react';

function TituloDinamico({ titulo }) {
  useEffect(() => {
    document.title = titulo; // Cambia el título de la pestaña
  }, [titulo]); // Se ejecuta cada vez que `titulo` cambia
}

¿Cuándo se usa?

• Para sincronizar el título, meta tags, o cualquier efecto basado en props/estado.

---

3. Suscribirse y limpiar eventos

jsx

import { useEffect } from 'react';

function EscucharScroll() {
  useEffect(() => {
    const handleScroll = () => {
      console.log("El usuario está scrolleando");
    };

    window.addEventListener('scroll', handleScroll);

    // Limpieza al desmontar
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []); // Sin dependencias = solo al montar/desmontar
}

¿Por qué la función de retorno?

• Para evitar memory leaks al eliminar el componente.

---

4. Temporizadores (setInterval)

jsx

import { useState, useEffect } from 'react';

function ContadorAutomatico() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prev) => prev + 1); // Incrementa cada segundo
    }, 1000);

    return () => clearInterval(interval); // Limpia al desmontar
  }, []);

  return <div>Contador: {count}</div>;
}

Error común:

❌ Olvidar limpiar el intervalo → Causa bugs en aplicaciones reales.

---

⚠️ ¿Cuándo NO usar useEffect?

• Para cálculos derivados (usa useMemo).

• Para manejar formularios (mejor usa librerías como react-hook-form).

• Para efectos que dependen de props/estado que no declaraste en las dependencias (React te avisará con un warning).

---

📌 Reglas Clave de useEffect

1. Siempre incluye todas las dependencias que usas dentro del efecto.

2. Usa la función de limpieza para evitar memory leaks.

3. No abuses de useEffect – A veces hay soluciones más simples.

---

🔎 Ejemplo Avanzado: Combinar useState + useEffect

jsx

import { useState, useEffect } from 'react';

function BuscadorDeUsuarios() {
  const [query, setQuery] = useState("");
  const [users, setUsers] = useState([]);

  useEffect(() => {
    if (query.length > 2) { // Evitar búsquedas vacías
      fetch(`https://api.example.com/users?q=${query}`)
        .then((res) => res.json())
        .then((data) => setUsers(data));
    }
  }, [query]); // Se ejecuta cada vez que `query` cambia

  return (
    <div>
      <input 
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Buscar usuarios..."
      />
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

¿Qué hace?

• Busca usuarios en tiempo real mientras escribes.

---

📚 Conclusión

useEffect es esencial para:

✔ Sincronizar con APIs.

✔ Manejar eventos y suscripciones.

✔ Limpiar recursos correctamente.

¿Te sirvió? ¡Compártelo en tu blog y ayuda a más devs a aprender React!