How do I get the useEffect dependency array right?
Include every value the effect uses that can change, use an empty array for mount-only, memoize objects and functions with useMemo and useCallback, and enable eslint-plugin-react-hooks to catch mistakes automatically.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in useEffect Dependency Array Mistakes That Cause Infinite Loops
Usually because you forgot the dependency array, or because you included a state variable that you update inside the effect. Each update triggers another render and another run. Fix the array so the effect only runs when intended.
The effect uses a stale version of that value and does not react when it changes. This causes bugs that are hard to trace because the code looks correct but behaves wrong. The hooks lint plugin catches these.
Because you included an object or function that is recreated on every render. The reference changes each time, so the effect runs every render. Memoize the value or move it inside the effect.
Still have questions?
Browse all our FAQs or reach out to our support team