Avoiding Stale State Updates in Lovable React Hooks

Why React hooks capture stale values in Lovable-generated code

Every time a React component renders, it creates a new 'snapshot' of all its variables, including state values. Functions defined inside the component (event handlers, callbacks, effects) capture the values from that specific render. If the function runs later — after state has changed — it still sees the old captured value. This is called a stale closure. Lovable's AI often generates code with stale closure bugs because the patterns look correct at first glance. A counter that calls setCount(count + 1) works on the first click but breaks when clicked rapidly because each click captures the same stale count value. The same issue affects timers, debounced handlers, WebSocket callbacks, and any function that runs asynchronously. This is one of the most common and confusing React bugs. It does not produce an error message — the code runs without crashing but produces incorrect results. Understanding when and why closures become stale is essential for building reliable interactive features in Lovable.

• Using setCount(count + 1) instead of setCount(prev => prev + 1) — captures the value at render time instead of using the latest
• useEffect dependency array missing a state variable — the effect keeps using the stale initial value
• Event handlers defined inside the component body that reference state without using functional updates
• setTimeout or setInterval callbacks that capture state at the time the timer was created
• WebSocket or subscription callbacks that were registered with an old state value

Error messages you might see

Before you start

• A Lovable project with interactive features that use React hooks (useState, useEffect, useCallback)
• A bug where state values seem outdated, wrong, or lagging behind user actions
• Access to the browser console to verify state values during debugging

How to fix it

const [count, setCount] = useState(0);
// Bug: rapid clicks all use the same stale 'count' value
const handleClick = () => {
  setCount(count + 1);
};
// Bug: both increments use the same 'count', so only +1 happens
const handleDoubleIncrement = () => {
  setCount(count + 1);
  setCount(count + 1);
};

const [count, setCount] = useState(0);
// Fixed: functional update always gets the latest value
const handleClick = () => {
  setCount((prev) => prev + 1);
};
// Fixed: each update builds on the previous one, so +2 happens
const handleDoubleIncrement = () => {
  setCount((prev) => prev + 1);
  setCount((prev) => prev + 1);
};

const [count, setCount] = useState(0);
// Bug: the interval always sees count as 0 (stale closure)
useEffect(() => {
  const interval = setInterval(() => {
    console.log("Current count:", count);
  }, 1000);
  return () => clearInterval(interval);
}, []); // Empty deps means count is captured once at mount

const [count, setCount] = useState(0);
const countRef = useRef(count);
// Keep the ref in sync with the latest state
useEffect(() => {
  countRef.current = count;
}, [count]);
// Now the interval reads the ref, which is always current
useEffect(() => {
  const interval = setInterval(() => {
    console.log("Current count:", countRef.current);
  }, 1000);
  return () => clearInterval(interval);
}, []);

const [searchTerm, setSearchTerm] = useState("");
const [results, setResults] = useState([]);
// Bug: effect never re-runs because searchTerm is missing from deps
useEffect(() => {
  fetchResults(searchTerm).then(setResults);
}, []); // Should include searchTerm

const [searchTerm, setSearchTerm] = useState("");
const [results, setResults] = useState([]);
// Fixed: effect re-runs whenever searchTerm changes
useEffect(() => {
  // Prevent race conditions with cleanup flag
  let cancelled = false;
  fetchResults(searchTerm).then((data) => {
    if (!cancelled) {
      setResults(data);
    }
  });
  return () => { cancelled = true; };
}, [searchTerm]); // searchTerm in dependency array

const [items, setItems] = useState([]);
// Bug: handler captures the initial empty array
const handleAddItem = useCallback((newItem) => {
  setItems([...items, newItem]);
}, []); // Missing 'items' dependency

const [items, setItems] = useState([]);
// Fixed: functional update does not need 'items' in deps
const handleAddItem = useCallback((newItem) => {
  setItems((prev) => [...prev, newItem]);
}, []); // Empty deps is correct because we use functional update

Complete code example

1import { useState, useEffect, useRef, useCallback } from "react";
2import { Button } from "@/components/ui/button";
3
4const StaleStateFreeCounter = () => {
5  const [count, setCount] = useState(0);
6  const [log, setLog] = useState<string[]>([]);
7  const countRef = useRef(count);
8
9  // Keep ref in sync with latest state
10  useEffect(() => {
11    countRef.current = count;
12  }, [count]);
13
14  // Functional update — always correct, even with rapid clicks
15  const increment = useCallback(() => {
16    setCount((prev) => prev + 1);
17  }, []);
18
19  // Timer that reads the ref for the latest value
20  useEffect(() => {
21    const interval = setInterval(() => {
22      setLog((prev) => [
23        ...prev.slice(-4),
24        `Count at ${new Date().toLocaleTimeString()}: ${countRef.current}`,
25      ]);
26    }, 2000);
27
28    return () => clearInterval(interval);
29  }, []);
30
31  // Async handler with functional update
32  const delayedIncrement = useCallback(() => {
33    setTimeout(() => {
34      // Functional update ensures we get the latest count
35      setCount((prev) => prev + 1);
36    }, 2000);
37  }, []);
38
39  return (
40    <div className="max-w-md mx-auto space-y-4 p-6">
41      <h2 className="text-2xl font-bold">Count: {count}</h2>
42      <div className="flex gap-2">
43        <Button onClick={increment}>Increment</Button>
44        <Button variant="outline" onClick={delayedIncrement}>
45          +1 after 2s
46        </Button>
47      </div>
48      <div className="text-sm text-muted-foreground space-y-1">
49        <p className="font-medium">Timer log (updates every 2s):</p>
50        {log.map((entry, i) => (
51          <p key={i}>{entry}</p>
52        ))}
53      </div>
54    </div>
55  );
56};
57
58export default StaleStateFreeCounter;

Best practices to prevent this

• Always use functional setState (prev => prev + 1) when the new value depends on the previous value
• Use useRef to hold the latest state value when you need to read it inside timers, intervals, or subscription callbacks
• Include every state variable and prop in useEffect dependency arrays — never suppress the exhaustive-deps ESLint rule
• When a useEffect needs to update the same state it depends on, use functional updates to avoid infinite loops
• Use useCallback with functional updates so the callback can have an empty dependency array without stale closures
• Add cleanup functions to useEffect (return () => clearInterval(id)) to prevent stale callbacks from running after unmount
• For async operations, use a cancelled flag in useEffect cleanup to prevent setting state on stale responses
• Test stale state bugs by clicking rapidly — if the result is wrong after fast clicks, you have a stale closure

Still stuck?

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

Related error patterns