I wasted 3 days on a cursor effect
I couldn't figure out why the component kept re-rendering, so I debugged all night, and it turns out I'd put an object in the dependency array...
I'm so deflated. Still, at least I learned something.
8 answers
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.