Preventing Side Effects with useEffect in Lovable Projects

Why useEffect triggers unexpected behavior in Lovable-generated code

useEffect is the React hook for running side effects — things like fetching data, setting up subscriptions, or updating the document title. Lovable's AI generates useEffect hooks frequently, but sometimes with subtle bugs that cause infinite loops, memory leaks, or stale data. The most common issue is missing cleanup. When a useEffect sets up a timer or subscription, it must return a cleanup function that tears it down. Without cleanup, timers keep running after the component unmounts, subscriptions accumulate, and event listeners pile up. The second most common issue is the dependency array. If the array is missing or incomplete, the effect either runs on every render (causing performance problems) or never re-runs when it should (causing stale data). The ESLint exhaustive-deps rule warns about missing dependencies for exactly this reason.

• useEffect has no cleanup function — timers and subscriptions leak when the component unmounts
• Dependency array is empty but the effect reads state or props that change over time
• Dependency array is missing entirely, causing the effect to run on every single render
• Effect updates a state variable that is also in its dependency array, creating an infinite loop
• Side effects that should run once (API calls) run repeatedly because dependencies change on every render

Error messages you might see

Before you start

• A Lovable project with useEffect hooks that behave unexpectedly
• Access to the browser console to see warnings and errors related to effects
• Basic understanding of what useEffect does (runs code after the component renders)

How to fix it

useEffect(() => {
  const interval = setInterval(() => {
    console.log("tick");
  }, 1000);
  // No cleanup — interval runs forever
}, []);

useEffect(() => {
  const interval = setInterval(() => {
    console.log("tick");
  }, 1000);
  // Cleanup: clear the interval when component unmounts
  return () => clearInterval(interval);
}, []);

const [userId, setUserId] = useState("1");
useEffect(() => {
  // Bug: fetches user 1 forever, even after userId changes
  fetch(`/api/users/${userId}`).then(r => r.json()).then(setUser);
}, []); // Missing userId in dependency array

const [userId, setUserId] = useState("1");
useEffect(() => {
  let cancelled = false;
  fetch(`/api/users/${userId}`)
    .then(r => r.json())
    .then(data => {
      if (!cancelled) setUser(data);
    });
  // Cleanup: prevent stale fetch from updating state
  return () => { cancelled = true; };
}, [userId]); // userId in dependency array — re-fetches when it changes

useEffect(() => {
  fetch("/api/data")
    .then(r => r.json())
    .then(data => setData(data)); // May run after unmount
}, []);

useEffect(() => {
  let cancelled = false;
  fetch("/api/data")
    .then(r => r.json())
    .then(data => {
      // Only update state if component is still mounted
      if (!cancelled) {
        setData(data);
      }
    });
  return () => { cancelled = true; };
}, []);

const [count, setCount] = useState(0);
// Infinite loop: effect reads count, updates count,
// which changes count, which triggers the effect again
useEffect(() => {
  setCount(count + 1);
}, [count]);

const [count, setCount] = useState(0);
// Fixed: functional update does not read count from the closure
// Effect runs once on mount and sets count to 1
useEffect(() => {
  setCount((prev) => prev + 1);
}, []); // No dependency on count needed with functional update

Complete code example

1import { useState, useEffect } from "react";
2
3type FetchState<T> = {
4  data: T | null;
5  loading: boolean;
6  error: string | null;
7};
8
9// Custom hook with proper cleanup and dependency handling
10export function useFetchData<T>(url: string): FetchState<T> {
11  const [state, setState] = useState<FetchState<T>>({
12    data: null,
13    loading: true,
14    error: null,
15  });
16
17  useEffect(() => {
18    // Cleanup flag prevents state updates after unmount
19    let cancelled = false;
20
21    setState({ data: null, loading: true, error: null });
22
23    fetch(url)
24      .then((response) => {
25        if (!response.ok) {
26          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
27        }
28        return response.json();
29      })
30      .then((data: T) => {
31        if (!cancelled) {
32          setState({ data, loading: false, error: null });
33        }
34      })
35      .catch((error) => {
36        if (!cancelled) {
37          setState({ data: null, loading: false, error: error.message });
38        }
39      });
40
41    // Cleanup: mark as cancelled so stale responses are ignored
42    return () => {
43      cancelled = true;
44    };
45  }, [url]); // Re-fetches when URL changes
46
47  return state;
48}

Best practices to prevent this

• Always return a cleanup function from useEffect when it creates timers, subscriptions, or event listeners
• Include every state variable, prop, and function read inside the effect in the dependency array
• Use an empty dependency array [] only for effects that should run once on mount and never again
• Never suppress the exhaustive-deps ESLint warning — fix the underlying dependency issue instead
• Use a cancelled flag in async effects to prevent state updates on unmounted components
• Use functional setState inside effects to avoid needing the state variable in the dependency array
• Split complex effects into multiple smaller effects, each with its own focused dependency array
• Do not put object or array literals in dependency arrays — they create new references on every render

Still stuck?

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

Related error patterns