I wasted 3 days on a cursor effect

Agreed. This gets me every time lol. The moment you put an object in the dependency array, your fate is sealed.

Well, that's a bit... These days, if you have eslint exhaustive-deps turned on, it catches all of that before you commit, so I don't get how someone burned 3 days on it. Are we talking about someone who develops with linting turned off?

Ah, I really relate to this. Last year I stayed up all night building a tooltip that follows the cursor and ran into the exact same thing. I put the options object straight into deps, and since it created a new reference every time the parent re-rendered, it went into an infinite loop. Wrapping it in React.memo didn't help either. In the end, I pulled out only primitive values inside useEffect and kept the object stable with useRef or useMemo, and that fixed it. Once you go through this, you never forget it lol.

Yep, this is right lol. And dependency array issues are almost always caused by object/function references. Even if the values are the same, if the reference is different, React treats it as different.

Three days is a bit rough—what debugging tools did you use? If you run the React DevTools Profiler and see which props are causing the re-renders, this seems like a case you could nail in 30 minutes. Next time, start by turning that on.

Got a source?

I don't agree. If it were a dependency array issue, it would show up immediately the moment you log re-renders to the console. Honestly, I think the reason you couldn't find it is that the component structure itself is complex—not that object references were the main culprit. I'd suggest taking another look at the root cause.

Wow, I wasted half a day on the exact same thing a few days ago... As soon as I wrapped it in useMemo, it disappeared right away. I'm so glad to see this that I'm leaving a comment ㅠㅠ