1 min read
A single line of code can cause your React component to loop indefinitely
There’s a subtle React bug many developers run into without realizing why.
const filters = [selectedValue]
Looks completely harmless.
But if filtersuseEffectuseCallback
👉 Your component might start re-rendering endlessly.
In JavaScript:
[1] === [1] // false {} === {} // false
Objects and arrays are compared by reference, not by value.
Every time your component renders:
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:
const filters = [selectedValue] const fetchData = useCallback(() => { dispatch({ filters }) }, [filters]) useEffect(() => { fetchData() }, [fetchData])
Here’s what happens:
Infinite loop.
In React:
Whenever you see this inside a render:
{} [] () => {}
Stabilize the reference with useMemo
const filters = useMemo(() => { return [selectedValue] }, [selectedValue])
Or avoid creating new objects/arrays if you don’t actually need them.
--
Hope this helps! :)