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

#react #ai #githubcopilot #webdev

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 thousands of examples where useState and useEffect are used together. So it reaches for that pattern by default even when the situation does not call for it.

It has no concept of derived state. It does not ask whether something should be stored or computed. It just generates what looks plausible.

And plausible is not the same as correct.

The fix is one line

const total = items.reduce((sum, i) => sum + i.price, 0)

No useState. No useEffect. Just a variable that is computed directly from items on every render.

One render instead of two. One source of truth instead of two. Zero unnecessary state.

The deeper problem

useEffect misuse is one of the most common AI coding mistakes in React projects.

Not because the pattern is rare. Because Copilot reaches for it constantly for derived state, for synchronous logic, for things that should never be effects in the first place.

Every area where your AI has no explicit constraints is an area where it improvises. And improvised useEffect logic compounds fast in a real React codebase.