useEffect Dependencies and Cleanup

The dependency array controls when your effect runs, and cleanup functions prevent memory leaks. Understanding these concepts is crucial for writing correct effects.

The Dependency Array

The second argument to useEffect determines when the effect should re-run:

Three Dependency Patterns

Each pattern has a specific use case:

Cleanup Functions

Effects can return a cleanup function that runs before the next effect or unmount:

Why Cleanup Matters

Without cleanup, you can cause memory leaks and bugs:

Cleanup with Event Listeners

A common pattern for DOM event listeners:

Dependency Comparison

React uses Object.is for comparing dependencies:

Exercise: Dependency Array

Exercise: Timer Cleanup

Exercise: Event Listener Manager

Key Takeaways

1. No deps - Effect runs after every render
2. Empty deps [] - Effect runs only once on mount
3. With deps [a, b] - Effect runs when any dependency changes
4. Cleanup function - Return a function to clean up before next effect or unmount
5. Reference comparison - Objects and arrays need stable references to avoid running every time