Frontend Development●Principiante

useEffect Básico y Ciclo de Vida

120 min

0 vistas

01 enero 2026

Entender efectos secundarios, dependencias y limpieza correcta en React.

¿Qué es un efecto secundario?

Es cualquier operación fuera del render: llamadas a APIs, timers, suscripciones, DOM o almacenamiento.
useEffect corre después del render para mantener la UI sincronizada con datos externos.

Ciclo de vida en componentes funcionales

Montaje: efecto con [] se ejecuta una sola vez.
Actualización: efecto con dependencias se ejecuta cuando cambian.
Desmontaje: el cleanup evita fugas de memoria.

Dependency array

Sin array: se ejecuta en cada render (riesgo de loops).
Array vacío []: solo al montar.
Con dependencias: se ejecuta cuando cambian valores específicos.

Cleanup functions

Limpian intervalos, listeners, sockets o requests en vuelo.
Evitan estados inconsistentes y consumo de recursos.

Ejemplos de Código

3 ejemplos

Efecto en cada render

javascript

1import { useState, useEffect } from "react";
2
3function Contador() {
4  const [count, setCount] = useState(0);
5
6  useEffect(() => {
7    console.log("Renderizado");
8  });
9
10  return <button onClick={() => setCount(count + 1)}>{count}</button>;
11}

Effect con dependencias

javascript

1import { useState, useEffect } from "react";
2
3function Titulo() {
4  const [visitas, setVisitas] = useState(0);
5
6  useEffect(() => {
7    document.title = `Visitas: ${visitas}`;
8  }, [visitas]);
9
10  return <button onClick={() => setVisitas((v) => v + 1)}>Sumar</button>;
11}

Limpieza de intervalos

javascript

1import { useState, useEffect } from "react";
2
3function Reloj() {
4  const [segundos, setSegundos] = useState(0);
5
6  useEffect(() => {
7    const id = setInterval(() => {
8      setSegundos((s) => s + 1);
9    }, 1000);
10
11    return () => clearInterval(id);
12  }, []);
13
14  return <div>Segundos: {segundos}</div>;
15}

Recursos

3 recursos disponibles

¡Hora de Practicar!

PrácticaPrincipiante15 min

Práctica guiada - Título y localStorage

Práctica

Actualizar el document.title con contador y persistir el nombre del usuario en localStorage.

Desafío de Código

EjercicioPrincipiante15 min

Ejercicios - useEffect básico

Ejercicios

(1) Timer con start/stop, (2) listener de resize, (3) contador con título dinámico.

Documentación Oficial

DocumentaciónPrincipiante15 min

useEffect Hook

Referencia oficial de `useEffect` y buenas prácticas.

useEffect