THE PROBLEM WITH USEEFFECT

Summary from the TLDR Dev newsletter

Almost every useEffect bug is the same problem in disguise: the effect runs more often than expected, either from a missing dependency array (which loops until the tab crashes) or from a dependency that's an object, array, or function getting a fresh reference each render, since React compares dependencies by reference rather than content. Fix it by stabilizing the reference with useMemo/useCallback or depending on primitive values, and catch it early with the react-hooks/exhaustive-deps ESLint rule.