React useEffect Cleanup Patterns

Proper cleanup in useEffect prevents memory leaks and bugs. Here's how to do it right.

Best Practices#

Always Clean Up:
✓ Event listeners
✓ Timers and intervals
✓ Subscriptions
✓ Fetch requests
✓ WebSocket connections
✓ Observers

Patterns:
✓ Return cleanup function from effect
✓ Use AbortController for fetch
✓ Store references for later cleanup
✓ Check for mounted state

Performance:
✓ Clean up before re-running effects
✓ Use refs for mutable values
✓ Debounce frequent updates
✓ Disconnect observers when done

Avoid:
✗ Forgetting cleanup functions
✗ Setting state after unmount
✗ Memory leaks from listeners
✗ Stale closures in callbacks

Cleanup functions in useEffect prevent memory leaks and unexpected behavior. Always clean up event listeners, timers, subscriptions, and network requests. Use AbortController for fetch requests and store references to clean up third-party library instances.

React useEffect Cleanup Patterns

Basic Cleanup#

Event Listeners#

Timers and Intervals#

Subscriptions#

Fetch Requests#

Animation Frames#

Observers#

Third-Party Libraries#

Common Mistakes#

Best Practices#

Conclusion#

Share this article

Related articles

React Hooks: A Deep Dive

React useEffect Patterns and Pitfalls

SWR for Data Fetching in React