¿Cómo funciona el array de dependencias de useEffect y qué suele salir mal con él?

React compara cada dependencia con su valor del render anterior usando Object.is y vuelve a ejecutar el efecto solo si alguna cambió. Un array vacío significa ejecutar una vez tras el montaje; omitir el array significa ejecutar después de cada render. Se rompe cuando dejas fuera una dependencia y capturas un valor obsoleto, o cuando incluyes un objeto o una función que se recrean en cada render, lo que hace que el efecto entre en bucle infinito.

React guarda el array del último render y compara cada elemento con Object.is. Si todo coincide se salta el efecto; si algo difiere ejecuta la limpieza del efecto viejo y luego el nuevo. El detalle es que el efecto captura las props y el estado del render que lo creó, así que si dejo algo fuera del array me queda un valor obsoleto que va quedándose desfasado en silencio. La otra cara es meter ahí un objeto o una función flecha, porque esas son referencias nuevas en cada render y el efecto se dispara en bucle. Mis arreglos habituales son actualizaciones funcionales de estado para no necesitar el valor actual como dependencia, sacar las constantes fuera del componente y envolver un callback solo cuando de verdad tiene que ser dependencia. Aun así, la primera pregunta que me hago es si el efecto debería existir. La mayoría de los efectos que he borrado calculaban estado derivado, que es simplemente un cálculo durante el render, o traían datos que pertenecían al router o a una librería de queries.