Programming
1 min read
Why does useEffect keep running even when dependencies don’t change?
A single line of code can cause your React component to loop indefinitely
Authors
There’s a subtle React bug many developers run into without realizing why.
js
const filters = [selectedValue]
Looks completely harmless.
But if
filtersuseEffectuseCallback👉 Your component might start re-rendering endlessly.
In JavaScript:
js
[1] === [1] // false {} === {} // false
Objects and arrays are compared by reference, not by value.
Every time your component renders:
js
const filters = [selectedValue]
JavaScript creates a brand new array in memory.
Even if
selectedValueAnd for React, that means: dependency changed.
A common pattern looks like this:
js
const filters = [selectedValue] const fetchData = useCallback(() => { dispatch({ filters }) }, [filters]) useEffect(() => { fetchData() }, [fetchData])
Here’s what happens:
- 1. Render → new array created
- 2. filters
- 3. fetchData
- 4. useEffect
- 5. State updates → re-render
- 6. Back to step 1
Infinite loop.
In React:
- Primitives (string, number, boolean) → compared by value → safe
- Objects / Arrays / Functions → compared by reference → risky
Whenever you see this inside a render:
js
{} [] () => {}
Stabilize the reference with
useMemojs
const filters = useMemo(() => { return [selectedValue] }, [selectedValue])
Or avoid creating new objects/arrays if you don’t actually need them.
--
Hope this helps! :)
