¿Qué es useEffect y cuándo se ejecuta?

Question

IT Interview Practice · Accepted Answer

`useEffect` ejecuta **efectos secundarios** (side effects): trabajo que sale fuera del renderizado de React, como obtener datos, suscripciones, temporizadores o actualizaciones manuales del DOM. Se ejecuta **después** de que el componente se renderiza, manteniendo los efectos secundarios fuera del cuerpo del render (el render debe permanecer puro).

## El array de dependencias controla el momento

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → se ejecuta tras el primer render y cada vez que `count` cambia.
- **`[]`** (vacío) → se ejecuta **una vez** tras el montaje (bueno para configuración única).
- **omitido** → se ejecuta tras **cada** render (raramente es lo que quieres).

## Limpieza: devuelve una función

Si un efecto configura algo que necesita ser desmontado, devuelve una función de limpieza. React la llama antes de la siguiente ejecución del efecto y cuando el componente se desmonta:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
```

## Por qué importa la limpieza

Sin ella, cada nueva ejecución añadiría otro temporizador/suscripción y nunca eliminaría el anterior: una fuga de memoria clásica. El ciclo de vida de un efecto con `[dep]` es: *ejecutar efecto → (cambia dep) → ejecutar limpieza → ejecutar efecto de nuevo*.

**Consejo:** no uses efectos para cosas que puedes calcular durante el render (deriva los valores en su lugar), e incluye en el array de dependencias todos los valores que el efecto lee (la regla de lint `react-hooks/exhaustive-deps` ayuda).

El array de dependencias controla el momento

Limpieza: devuelve una función

Por qué importa la limpieza

Preguntas relacionadas