GitHub Copilot Stores Derived State in useEffect. This Is Why That Breaks Your App.

There is a pattern that shows up in almost every React project where AI was involved. It looks harmless. It works on first glance. And it silently creates bugs that are annoying to track down. It looks like this: const [total, setTotal] = useState(0) useEffect(() => { setTotal(items.reduce((sum, i) => sum + i.price, 0)) }, [items]) GitHub Copilot writes this confidently. No warnings. No errors. Just broken logic waiting to happen. What is actually wrong here Total is not state. Total is a calculation. It depends entirely on items. Every time items changes, total gets recalculated anyway. Storing it in useState and syncing it with useEffect adds a second source of truth that never needed to exist. The result is a component that renders twice when it should render once. State that is always one step behind. And a useEffect that exists for no reason other than that the AI had no rule against it. Why GitHub Copilot does this Copilot is not broken. It is pattern matching. It has seen