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.
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 selectedValue
And 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])
-
1.
Render → new array created
-
2.
filters
-
3.
fetchData
-
4.
useEffect
-
5.
State updates → re-render
-
6.
Back to step 1
-
Primitives (string, number, boolean) → compared by value → safe
-
Objects / Arrays / Functions → compared by reference → risky
Whenever you see this inside a render:
Stabilize the reference with useMemo
js
const filters = useMemo(() => {
return [selectedValue]
}, [selectedValue])
Or avoid creating new objects/arrays if you don’t actually need them.
