{"slug": "como-solucionar-el-bucle-infinito-en-useeffect-con-objetos-y-arrays", "title": "Cómo solucionar el bucle infinito en useEffect con objetos y arrays", "summary": "The article explains that infinite loops in React's `useEffect` occur because it uses reference equality (`===`) to compare dependencies, so a new object created by `useState({})` is always considered a change. Solutions include removing the dependency with an empty array `[]`, using `JSON.stringify` for content comparison, or employing `useMemo` to create a stable primitive value. The article warns that `JSON.stringify` is costly for large objects and cannot handle functions, `undefined`, or circular references.", "body_md": "# Cómo solucionar el bucle infinito en useEffect con objetos y arrays\n\n## Explicación técnica\n\nEl problema ocurre porque `useEffect`\n\ncompara los valores de las dependencias usando **comparación de referencia ( ===)**, no por contenido (deep equality). Cuando usas\n\n`useState({})`\n\n, cada llamada a `setObj({})`\n\ncrea un **nuevo objeto en memoria**, aunque tenga el mismo contenido. React detecta que la referencia cambia (\n\n`obj !== obj`\n\n), lo que dispara la reejecución del `useEffect`\n\n, causando el bucle infinito.En tu caso:\n\n``` js\nconst [ingredients, setIngredients] = useState({});\nuseEffect(() => {\n  setIngredients({}); // ¡Crea un nuevo objeto!\n}, [ingredients]); // ingredients cambia de referencia → reejecuta → loop infinito\n```\n\n## Pasos para solucionarlo\n\n### Opción 1: Evitar la actualización innecesaria (recomendada)\n\nSi no necesitas actualizar el estado dentro del `useEffect`\n\n, **elimina la dependencia del objeto/array** y usa un array vacío:\n\n``` js\nuseEffect(() => {\n  // Solo ejecutar al montar el componente\n  setIngredients({});\n}, []); // ✅ Sin dependencias → solo se ejecuta una vez\n```\n\n### Opción 2: Comparación profunda manual\n\nSi necesitas ejecutar el `useEffect`\n\nsolo cuando el *contenido* cambia, usa `JSON.stringify`\n\n(para objetos simples sin funciones/circularidades):\n\n``` js\nuseEffect(() => {\n  setIngredients({});\n}, [JSON.stringify(ingredients)]); // ✅ Compara contenido, no referencia\n```\n\n⚠️ **Advertencia**: `JSON.stringify`\n\nes costoso en objetos grandes y falla con funciones, `undefined`\n\n, o referencias circulares.\n\n### Opción 3: Usar `useMemo`\n\npara una representación estable\n\nCrea una representación estable del objeto (ej. número de elementos, hash):\n\n``` js\nconst ingredientsHash = useMemo(() => \n  Object.keys(ingredients).length, // o tu lógica personalizada\n  [ingredients]\n);\n\nuseEffect(() => {\n  setIngredients({});\n}, [ingredientsHash]); // ✅ Compara valor primitivo estable\n```\n\n### Opción 4: Validar si el valor es distinto antes de actualizar\n\nEvita la actualización si el contenido es idéntico:\n\n``` js\nuseEffect(() => {\n  if (Object.keys(ingredients).length > 0) {\n    setIngredients({});\n  }\n}, [ingredients]); // ✅ Solo actualiza si no está vacío\n```\n\n## Bloque de código corregido (recomendado)\n\n``` js\nconst [ingredients, setIngredients] = useState({});\n\nuseEffect(() => {\n  // Solo ejecutar al montar el componente (ej. limpiar estado inicial)\n  setIngredients({});\n}, []); // ✅ Solución definitiva para este caso\n```\n\n## Pro-tip\n\n-\n**Nunca actualices el mismo estado que usas como dependencia** sin una lógica de comparación profunda. - Para objetos complejos, usa librerías como\n`immer`\n\no`useDeepCompareEffect`\n\n(de`use-deep-compare-effect`\n\n) si necesitas comparación profunda segura. - Si el objetivo es limpiar el estado al montar, usa\n`useEffect`\n\ncon`[]`\n\ny no actualices el estado dentro. En su lugar, inicializa el estado con el valor deseado desde el inicio:\n\n```\nconst [ingredients, setIngredients] = useState({}); // ✅ Inicialización directa\n```\n\n", "url": "https://wpnews.pro/news/como-solucionar-el-bucle-infinito-en-useeffect-con-objetos-y-arrays", "canonical_source": "https://dev.to/erickeduardoramos03/como-solucionar-el-bucle-infinito-en-useeffect-con-objetos-y-arrays-52oa", "published_at": "2026-05-23 10:23:54+00:00", "updated_at": "2026-05-23 11:03:45.363903+00:00", "lang": "en", "topics": ["developer-tools"], "entities": [], "alternates": {"html": "https://wpnews.pro/news/como-solucionar-el-bucle-infinito-en-useeffect-con-objetos-y-arrays", "markdown": "https://wpnews.pro/news/como-solucionar-el-bucle-infinito-en-useeffect-con-objetos-y-arrays.md", "text": "https://wpnews.pro/news/como-solucionar-el-bucle-infinito-en-useeffect-con-objetos-y-arrays.txt", "jsonld": "https://wpnews.pro/news/como-solucionar-el-bucle-infinito-en-useeffect-con-objetos-y-arrays.jsonld"}}