Evitar bucles infinitos con efectos

Un efecto puede provocar un bucle si cambia estado y ese cambio hace que el mismo efecto vuelva a ejecutarse continuamente. No copies este primer ejemplo en una pantalla activa: es código para analizar el error.

Ejemplo incorrecto #

1// INCORRECTO: fragmento para estudiar, no para ejecutar.
2useEffect(() => {
3  setCount(count + 1);
4});

El ciclo es: render, efecto, cambio de count, nuevo render, nuevo efecto y otro cambio. No hay una condición que lo detenga.

Añadir [count] no soluciona este caso: el efecto seguiría cambiando la misma dependencia que lo activa. Tampoco debes suprimir las advertencias de dependencias para esconder el problema.

Mover la acción a donde corresponde #

Si el objetivo es incrementar por un clic, utiliza un manejador:

1import { useState } from 'react';
2
3export default function Ejem_17() {
4  const [count, setCount] = useState(0);
5  const doble = count * 2;
6
7  return (
8    <>
9      <p>Contador: {count}. Doble: {doble}</p>
10      <button onClick={() => setCount((prev) => prev + 1)}>Incrementar</button>
11    </>
12  );
13}

El contador cambia únicamente por la interacción. El doble se calcula durante el render sin otro estado ni efecto. Si necesitas que el contador empiece en 1, usa useState(1) en lugar de un efecto que incremente al montar.

Cómo investigar un bucle #

Identifica qué efecto actualiza estado y qué valores lo hacen repetirse. Comprueba también las dependencias que sean objetos o funciones creadas durante el render: su identidad puede cambiar aunque parezcan contener lo mismo.

No toda actualización dentro de un efecto crea un bucle. Un listener externo puede actualizar estado al recibir un evento sin que el efecto se registre otra vez, siempre que sus dependencias sean correctas y exista limpieza.

Prueba tú #

Explica por escrito por qué [count] mantiene el ciclo del ejemplo incorrecto. Después identifica en la solución qué evento inicia cada actualización.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.