Fixing Infinite Loop Errors in Lovable Apps

Why infinite loops happen in Lovable-generated code

Lovable generates React components that use hooks like useState and useEffect for state management and side effects. Infinite loops occur when these hooks create a circular dependency: an effect sets state, the state change triggers a re-render, the re-render triggers the effect again, and the cycle repeats forever. The most common pattern is a useEffect that has a state variable in its dependency array and also sets that same variable inside the effect body. Every time the effect runs, it updates the state, which triggers the effect to run again. React detects this after a certain number of cycles and throws the 'Maximum update depth exceeded' error. Another subtle cause is objects or arrays created inside the component body that are used as useEffect dependencies. In JavaScript, two objects with the same content are not equal ({ a: 1 } !== { a: 1 }), so React thinks the dependency changed on every render and runs the effect again. Lovable's AI sometimes generates this pattern when creating filter objects, configuration objects, or arrays that get passed as effect dependencies.

• useEffect sets a state variable that is also in its own dependency array — creating a set-render-run loop
• Object or array dependency recreated on every render — React sees it as a new value each time
• Missing dependency array entirely — useEffect runs on every render, not just when dependencies change
• Fetching data inside useEffect and setting state with the result, but the fetch parameters change on every render
• Parent component re-renders with new object/function props, causing child useEffect to re-fire endlessly

Error messages you might see

Before you start

• A Lovable project with a component that freezes, crashes, or shows the 'Maximum update depth exceeded' error
• Access to the browser console to see the full error message and stack trace
• Basic understanding of React's useEffect hook and dependency arrays

How to fix it

// Infinite loop: effect depends on 'items' and also sets 'items'
const [items, setItems] = useState([]);
useEffect(() => {
  const filtered = allItems.filter(item => item.active);
  setItems(filtered); // Changes 'items' → triggers useEffect again
}, [items]); // 'items' is in the dependency array

// Fixed: effect depends on 'allItems' (the source), not 'items' (the result)
const [items, setItems] = useState([]);
useEffect(() => {
  const filtered = allItems.filter(item => item.active);
  setItems(filtered); // Sets items, but allItems did not change
}, [allItems]); // Only re-run when the source data changes

// Loop: filterConfig is a new object on every render
const MyComponent = ({ status }: { status: string }) => {
  const filterConfig = { status, active: true }; // New object each render
  useEffect(() => {
    fetchData(filterConfig);
  }, [filterConfig]); // Always 'changed' because new reference
};

// Fixed: useMemo keeps the same reference when values haven't changed
import { useMemo } from "react";
const MyComponent = ({ status }: { status: string }) => {
  const filterConfig = useMemo(
    () => ({ status, active: true }),
    [status] // Only recreate when status actually changes
  );
  useEffect(() => {
    fetchData(filterConfig);
  }, [filterConfig]); // Stable reference — no infinite loop
};

// Loop: 'count' in dependency array, setCount changes count
const [count, setCount] = useState(0);
useEffect(() => {
  const interval = setInterval(() => {
    setCount(count + 1); // Depends on 'count'
  }, 1000);
  return () => clearInterval(interval);
}, [count]); // Re-runs on every count change → creates new interval

// Fixed: functional update removes 'count' from dependencies
const [count, setCount] = useState(0);
useEffect(() => {
  const interval = setInterval(() => {
    setCount(prev => prev + 1); // Uses previous value, no dependency needed
  }, 1000);
  return () => clearInterval(interval);
}, []); // Empty array — runs once, interval updates count correctly

// Loop: effect always sets state, even when the value hasn't changed
useEffect(() => {
  const result = computeValue(input);
  setValue(result); // Sets state on every run, even if same value
}, [input, value]);

// Fixed: only set state when the computed result actually differs
useEffect(() => {
  const result = computeValue(input);
  setValue(prev => {
    if (prev === result) return prev; // No change — no re-render
    return result;
  });
}, [input]); // Removed 'value' from deps since we use functional update

Complete code example

1import { useEffect, useMemo, useState } from "react";
2import { supabase } from "@/integrations/supabase/client";
3
4interface DataFetcherProps {
5  tableName: string;
6  status: string;
7}
8
9// Safe data fetching pattern that avoids infinite loops
10const SafeDataFetcher = ({ tableName, status }: DataFetcherProps) => {
11  const [data, setData] = useState<any[]>([]);
12  const [loading, setLoading] = useState(true);
13  const [error, setError] = useState<string | null>(null);
14
15  // Stabilize filter config so useEffect doesn't re-run on every render
16  const filters = useMemo(() => ({ status }), [status]);
17
18  useEffect(() => {
19    let cancelled = false; // Prevent state updates after unmount
20
21    const fetchData = async () => {
22      setLoading(true);
23      setError(null);
24
25      try {
26        const { data: result, error: fetchError } = await supabase
27          .from(tableName)
28          .select("*")
29          .eq("status", filters.status);
30
31        if (fetchError) throw fetchError;
32        if (!cancelled) setData(result ?? []);
33      } catch (err) {
34        if (!cancelled) setError(err instanceof Error ? err.message : "Fetch failed");
35      } finally {
36        if (!cancelled) setLoading(false);
37      }
38    };
39
40    fetchData();
41
42    // Cleanup function prevents state updates if component unmounts
43    return () => { cancelled = true; };
44  }, [tableName, filters]); // Only re-fetch when table or filters change
45
46  if (loading) return <p className="text-muted-foreground">Loading...</p>;
47  if (error) return <p className="text-destructive">{error}</p>;
48
49  return (
50    <ul className="space-y-2">
51      {data.map((item) => (
52        <li key={item.id} className="p-2 border rounded">
53          {JSON.stringify(item)}
54        </li>
55      ))}
56    </ul>
57  );
58};
59
60export default SafeDataFetcher;

Best practices to prevent this

• Never include a state variable in a useEffect dependency array if the effect also sets that same variable
• Use functional state updates (setState(prev => ...)) when updating state based on its previous value inside effects
• Wrap object and array values in useMemo when they are used as useEffect dependencies
• Add a cleanup function (return () => { cancelled = true }) in effects that make async calls to prevent updates after unmount
• Start with an empty dependency array [] and add dependencies one at a time to identify which one causes the loop
• Use the React DevTools Profiler to see which components are re-rendering excessively
• If an effect should only run once on mount, use an empty dependency array [] and suppress the ESLint warning only if you are certain no dependencies are needed
• Move static values and constant objects outside the component body so they maintain stable references

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns