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

Share via

Posted by

TThức Trần

Posted on

A tiny line of code can cause an infinite re-render loop in ReactA tiny line of code can cause an infinite re-render loop in React

There’s a subtle React bug many developers run into without realizing why.


const filters = [selectedValue]

Looks completely harmless.

But if filters is used inside a dependency array of useEffect or useCallback…

👉 Your component might start re-rendering endlessly.

What’s actually happening?What’s actually happening?

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 hasn’t changed, the reference is different.

And for React, that means: dependency changed.

The typical chain reactionThe typical chain reaction

A common pattern looks like this:


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.

The solutionThe solution

In React:

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:


const filters = useMemo(() => {
  return [selectedValue]
}, [selectedValue])

Or avoid creating new objects/arrays if you don’t actually need them.

Hope this helps! :)

Why does useEffect keep running even when dependencies don’t change?

A tiny line of code can cause an infinite re-render loop in ReactA tiny line of code can cause an infinite re-render loop in React

A tiny line of code can cause an infinite re-render loop in ReactA tiny line of code can cause an infinite re-render loop in React

What’s actually happening?What’s actually happening?

What’s actually happening?What’s actually happening?

The typical chain reactionThe typical chain reaction

The typical chain reactionThe typical chain reaction

The solutionThe solution

The solutionThe solution

Comments (0)

Comments (0)