Does anyone know why my useEffect dependency array is causing an infinite loop?
I put one state value into the dependency array in a component, and now it renders endlessly.
I looked it up, and it says that if you put an object or function in as-is, a new reference is created on every render, which causes this. In that case, is the standard approach to wrap it in useMemo or useCallback? Or would it be better to change the structure entirely?
I'm also curious whether this is a common pattern people run into in real-world code.
5 answers
If you put an object or function in the dependency array, it's true that it runs every render because it's a new reference. But that's not necessarily the only cause of an infinite loop. If you're setting that state again inside useEffect, it'll loop no matter what's in the dependency array. Without seeing the code, an exact diagnosis is hard, but first check whether you're calling setState inside the effect.
Wrapping things in useMemo and useCallback is the standard approach, but overusing it just makes your code messier lol. Most of the time, changing the structure is the answer. For derived state, don't create an effect—just compute during render, or use a functional update with setState and you can take the state itself out of the dependencies.
Well, that's a bit... it seems premature to pin it on the dependency array. It sounds like you just pasted in what you saw in search results, but the real cause could be a cycle where the effect produces a different value every time, and that then changes the state again. Log how many times it renders to the console and identify the cause first.