¿Para qué se usa useEffect?
¡Claro! Si useCallback se encarga de memoizar (recordar) funciones, el hook useEffect es la herramienta clave en React para manejar los efectos secundarios de tu aplicación.
El Objetivo Principal de useEffect
useEffect se utiliza para sincronizar tu componente con un sistema externo o realizar operaciones que no forman parte del proceso normal de renderizado de React (la representación de la UI).
En resumen, useEffect te permite "salir" del flujo de React para interactuar con el mundo exterior.
¿Qué es un Efecto Secundario?
Un efecto secundario es cualquier acción que afecta algo fuera de la función de renderizado del componente. Los ejemplos más comunes son:
Llamadas de Red (APIs): Obtener datos del servidor.
Suscripciones: Configurar oyentes de eventos globales, como cambios de tamaño de ventana o el estado de autenticación.
Manipulación Manual del DOM: Actualizar el título de la página (
document.title) o integrar librerías de terceros (como D3 o Three.js) que manipulan elementos del DOM.Timers: Usar
setTimeoutosetInterval.
¿Cómo funciona useEffect?
El hook toma dos argumentos:
La Función de Efecto (
callback): El código que quieres ejecutar.El Array de Dependencias (
[deps]): Una lista de valores (variables, props, estados) que React debe observar.
Sintaxis
useEffect(() => {
// 1. Código del efecto secundario
return () => {
// 2. Función de limpieza (opcional)
};
}, [dependencia1, dependencia2]); // 3. Array de dependencias
1. La Función de Efecto (¿Cuándo se ejecuta?)
Esta función se ejecuta después de que el componente ha sido renderizado e inyectado en el DOM.
2. La Función de Limpieza (Cleanup)
Si tu efecto secundario realiza una acción que consume recursos o puede causar fugas de memoria (como configurar un timer o una suscripción), debes devolver una función de limpieza dentro del useEffect.
La limpieza se ejecuta:
Antes de que el componente se desmonte del DOM.
Antes de ejecutar el efecto de nuevo (si las dependencias cambian).
3. El Array de Dependencias (El Control Clave)
El array de dependencias es lo que controla el comportamiento de useEffect. Es el mecanismo de React para evitar que el efecto se ejecute innecesariamente en cada renderizado, lo cual causaría graves problemas de rendimiento.
Existen tres casos principales:
Ejemplo Práctico: Fetching de Datos
Este es el caso de uso más común. Queremos cargar los datos de un usuario tan pronto como el componente se muestre, y solo si el userId cambia.
import React, { useState, useEffect } from 'react';
function PerfilUsuario({ userId }) {
const [datos, setDatos] = useState(null);
const [cargando, setCargando] = useState(true);
// El efecto se ejecuta:
// 1. Al montar el componente (userId !== undefined).
// 2. Cada vez que la prop 'userId' cambie.
useEffect(() => {
setCargando(true);
setDatos(null);
console.log(`[EFFECT] Cargando datos para el usuario: ${userId}`);
// Simulación de una llamada API
const fetchDatos = setTimeout(() => {
setDatos({ nombre: `Usuario ${userId}`, edad: 30 });
setCargando(false);
}, 1000);
// FUNCIÓN DE LIMPIEZA
// Si el 'userId' cambia antes de que el timer termine,
// esta función limpia el timer para evitar actualizar un estado obsoleto.
return () => {
clearTimeout(fetchDatos);
console.log(`[CLEANUP] Limpiando el fetch anterior para el usuario: ${userId}`);
};
}, [userId]); // <--- Dependencia clave
if (cargando) return <p>Cargando perfil...</p>;
if (!datos) return <p>No se encontraron datos.</p>;
return (
<div>
<h2 className="text-xl font-semibold">Perfil de {datos.nombre}</h2>
<p>Edad: {datos.edad}</p>
</div>
);
}
En este ejemplo, useEffect asegura que la lógica de la API se ejecute solo cuando es necesario (cuando userId cambia) y limpia la solicitud pendiente si el componente se desmonta o se necesita cargar un nuevo usuario.
Comentarios