13. Hook: useEffect
Tutorial: 13. Hook useEffect en React
Introducción
Continuando con los hooks de React, hay una nueva funcionalidad llamada useEffect (en tu contenido aparece como "Youssef", pero se refiere a useEffect). Este hook te permite ejecutar efectos secundarios en componentes funcionales de forma completamente automática.
Normalmente se usa para:
Inicialización de variables
Llamadas a APIs
Limpiar un componente antes de desmontarlo del DOM
Es el equivalente funcional a:
componentDidMount
componentDidUpdate
componentWillUnmount en componentes de clase
Concepto Básico
useEffect acepta una función como argumento, y esta función se ejecutará cuando el componente se renderice o cuando ciertas dependencias se modifiquen.
Ejemplo Práctico Paso a Paso
Paso 1: Configuración Inicial
Primero, veamos un componente básico con useState:
jsx
import { useState } from "react";
export default function Welcome(props) {
const [counter, setCounter] = useState(0);
const [semaforo, setSemaforo] = useState(false);
const { message, name } = props;
const contar = () => {
setCounter(counter + 1);
setSemaforo(!semaforo);
};
return (
<div>
<h1>Hola, {name}</h1>
<h2>Contador de React con Hooks</h2>
<h4>El número del contador es {counter}</h4>
<p>El semáforo está en color {semaforo ? "red" : "green"}</p>
<button type="submit" onClick={contar}>
Sumar contador
</button>
</div>
);
}
Explicación:
Tenemos dos estados: counter (número) y semaforo (booleano)
La función contar() incrementa el contador y alterna el estado del semáforo
En el renderizado mostramos el color del semáforo condicionalmente
Paso 2: Reglas de Nomenclatura de useState
Cuando declaramos un estado con useState:
La primera variable debe ir en minúscula (ej: semaforo)
La función para modificarla debe comenzar con set seguido del nombre en mayúscula (ej: setSemaforo)
Paso 3: Introduciendo useEffect
Ahora agregamos useEffect para observar cambios en el estado:
import { useState, useEffect } from "react";
export default function Welcome(props) {
const [counter, setCounter] = useState(0);
const [semaforo, setSemaforo] = useState(false);
const { message, name } = props;
// useEffect que se ejecuta cuando cambia 'semaforo'
useEffect(() => {
console.log(`El semáforo cambió a: ${semaforo}`);
}, [semaforo]);
const contar = () => {
setCounter(counter + 1);
setSemaforo(!semaforo);
};
return (
<div>
<h1>Hola, {name}</h1>
<h2>Contador de React con Hooks</h2>
<h4>El número del contador es {counter}</h4>
<p>El semáforo está en color {semaforo ? "red" : "green"}</p>
<button type="submit" onClick={contar}>
Sumar contador
</button>
</div>
);
}
Paso 4: Cómo Funciona useEffect
Sintaxis:
jsx
useEffect(() => {
// Código a ejecutar
}, [dependencias]);
Casos de uso:
Sin array de dependencias - Se ejecuta en cada renderizado:
jsx
useEffect(() => {
console.log("Se ejecuta en cada renderizado");
});
Con array vacío - Se ejecuta solo al montar el componente:
jsx
useEffect(() => {
console.log("Se ejecuta solo al montar el componente");
}, []);
Con dependencias - Se ejecuta cuando cambian las dependencias:
jsx
useEffect(() => {
console.log("Se ejecuta cuando 'semaforo' cambia");
}, [semaforo]);
Paso 5: Ejemplo Completo con Varios Efectos
jsx
import { useState, useEffect } from "react";
export default function Welcome(props) {
const [counter, setCounter] = useState(0);
const [semaforo, setSemaforo] = useState(false);
const { name } = props;
// Se ejecuta solo al montar el componente
useEffect(() => {
console.log("Componente montado");
// Función de limpieza (se ejecuta al desmontar)
return () => {
console.log("Componente desmontado");
};
}, []);
// Se ejecuta cuando cambia 'counter'
useEffect(() => {
console.log(`Contador actualizado: ${counter}`);
}, [counter]);
// Se ejecuta cuando cambia 'semaforo'
useEffect(() => {
console.log(`Semáforo actualizado: ${semaforo ? "ROJO" : "VERDE"}`);
}, [semaforo]);
const contar = () => {
setCounter(counter + 1);
setSemaforo(!semaforo);
};
return (
<div>
<h1>Hola, {name}</h1>
<h2>Contador de React con Hooks</h2>
<h4>El número del contador es {counter}</h4>
<p style={{ color: semaforo ? "red" : "green" }}>
El semáforo está en color {semaforo ? "red" : "green"}
</p>
<button type="button" onClick={contar}>
Sumar contador
</button>
</div>);}
Errores Comunes en los Ejemplos Adjuntos
Sintaxis incorrecta en destructuring:
jsx
// ❌ INCORRECTO
const ( message, name ) = props;
// ✅ CORRECTO
const { message, name } = props;
Nombres de variables inconsistentes:
jsx
// ❌ INCORRECTO (mezcla 'semaforo' y 'semafore')
const [semaforo, setSemaforo] = useState(false);
setSemaforo(semafore); // ← 'semafore' no existe
// ✅ CORRECTO
const [semaforo, setSemaforo] = useState(false);
setSemaforo(!semaforo);
Sintaxis JSX incorrecta:
jsx
// ❌ INCORRECTO
<button onClick="contar">
// ✅ CORRECTO
<button onClick={contar}>
Aplicaciones Prácticas de useEffect
Llamadas a APIs:
jsx
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
Suscripciones a eventos:
jsx
useEffect(() => {
const handleResize = () => {
setWindowSize(window.innerWidth);
};
window.addEventListener('resize', handleResize);
// Limpieza
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
Actualización del título del documento:
jsx
useEffect(() => {
document.title = `Contador: ${counter}`;
}, [counter]);
Conclusión
El hook useEffect es una herramienta poderosa para manejar efectos secundarios en componentes funcionales de React. Recuerda:
Importarlo desde 'react'
Definir las dependencias correctamente
Implementar funciones de limpieza cuando sea necesario
Evitar efectos infinitos asegurándote de que las dependencias estén correctamente definidas
Con práctica, useEffect se convertirá en una herramienta esencial para crear componentes React más dinámicos y eficientes.
¿Tienes preguntas sobre algún aspecto específico de useEffect? ¡Déjalas en los comentarios!
Comentarios
Publicar un comentario