Cleanup Functions in React | Preventing Memory Leaks with useEffect

Side effects often need to be cleaned up when they're no longer needed. Timers need to be cleared, subscriptions need to be unsubscribed, and fetch requests should be cancelled. Without cleanup, you get memory leaks - your app uses more and more memory, slows down, and can even crash. In this lesson, you'll learn when and how to clean up effects properly, preventing bugs and building professional React applications. 🧹

What Is Cleanup?

A cleanup function is code that runs to reverse or stop an effect:

cleanup-basic.jsx

React.useEffect(() => {
  // Effect code runs after render
  console.log('Effect: Setting up...')
  
  // Cleanup function (optional)
  return () => {
    console.log('Cleanup: Tearing down...')
  }
}, [])

// When cleanup runs:
// 1. Before effect re-runs (if dependencies change)
// 2. When component unmounts (removed from screen)

When Does Cleanup Run?

Before the effect re-runs - Clean up previous effect before new one
When component unmounts - Clean up when component removed

Cleanup doesn't run on the first render, only on subsequent re-runs and unmount.

Why Cleanup Is Important

Problem: Memory Leak Without Cleanup

memory-leak.jsx

function Timer() {
  const [count, setCount] = React.useState(0)
  
  React.useEffect(() => {
    // ❌ BAD - Memory leak!
    setInterval(() => {
      setCount(prev => prev + 1)
    }, 1000)
  }, [])
  
  return <p>Count: {count}</p>
}

// Problem:
// 1. Component mounts, starts interval
// 2. Component unmounts (user navigates away)
// 3. Interval keeps running!
// 4. setCount tries to update unmounted component
// 5. Memory leak + React warnings

Solution: Clear Interval on Cleanup

cleanup-timer.jsx

function Timer() {
  const [count, setCount] = React.useState(0)
  
  React.useEffect(() => {
    // ✅ GOOD - Cleanup prevents memory leak
    const intervalId = setInterval(() => {
      setCount(prev => prev + 1)
    }, 1000)
    
    // Cleanup: Clear interval when component unmounts
    return () => {
      clearInterval(intervalId)
      console.log('Interval cleared')
    }
  }, [])
  
  return <p>Count: {count}</p>
}

// Flow:
// 1. Component mounts, interval starts
// 2. Component unmounts
// 3. Cleanup runs, interval cleared
// 4. No memory leak!

Common Cleanup Patterns

1. Cleaning Up Timers

cleanup-timers.jsx

// setInterval - Repeating timer
function IntervalTimer() {
  const [count, setCount] = React.useState(0)
  
  React.useEffect(() => {
    const id = setInterval(() => {
      setCount(prev => prev + 1)
    }, 1000)
    
    return () => clearInterval(id)  // Cleanup
  }, [])
  
  return <p>{count}</p>
}

// setTimeout - One-time timer
function DelayedMessage() {
  const [message, setMessage] = React.useState('')
  
  React.useEffect(() => {
    const id = setTimeout(() => {
      setMessage('Hello after 3 seconds!')
    }, 3000)
    
    return () => clearTimeout(id)  // Cleanup
  }, [])
  
  return <p>{message}</p>
}

// Why cleanup timeouts?
// If component unmounts before timeout fires,
// setMessage will try to update unmounted component

2. Cleaning Up Event Listeners

cleanup-events.jsx

function MouseTracker() {
  const [position, setPosition] = React.useState({ x: 0, y: 0 })
  
  React.useEffect(() => {
    const handleMouseMove = (event) => {
      setPosition({ x: event.clientX, y: event.clientY })
    }
    
    // Add listener
    window.addEventListener('mousemove', handleMouseMove)
    
    // Cleanup: Remove listener
    return () => {
      window.removeEventListener('mousemove', handleMouseMove)
    }
  }, [])
  
  return <p>Mouse: {position.x}, {position.y}</p>
}

// Without cleanup:
// - Listener stays attached after component unmounts
// - Multiple listeners accumulate if component remounts
// - Memory leak!

3. Cleaning Up Subscriptions

cleanup-subscriptions.jsx

function ChatRoom({ roomId }) {
  const [messages, setMessages] = React.useState([])
  
  React.useEffect(() => {
    // Subscribe to chat room
    const subscription = chatAPI.subscribe(roomId, (message) => {
      setMessages(prev => [...prev, message])
    })
    
    // Cleanup: Unsubscribe
    return () => {
      subscription.unsubscribe()
      console.log('Unsubscribed from room', roomId)
    }
  }, [roomId])
  
  return (
    <div>
      {messages.map((msg, i) => <p key={i}>{msg}</p>)}
    </div>
  )
}

// When roomId changes:
// 1. Cleanup runs: unsubscribe from old room
// 2. Effect runs: subscribe to new room

4. Aborting Fetch Requests

cleanup-fetch.jsx

function UserProfile({ userId }) {
  const [user, setUser] = React.useState(null)
  const [isLoading, setIsLoading] = React.useState(true)
  
  React.useEffect(() => {
    // Create AbortController
    const controller = new AbortController()
    
    const fetchUser = async () => {
      try {
        setIsLoading(true)
        
        const response = await fetch(
          `/api/users/${userId}`,
          { signal: controller.signal }  // Pass signal
        )
        
        const data = await response.json()
        setUser(data)
      } catch (error) {
        // Ignore abort errors
        if (error.name !== 'AbortError') {
          console.error('Fetch failed:', error)
        }
      } finally {
        setIsLoading(false)
      }
    }
    
    fetchUser()
    
    // Cleanup: Abort fetch
    return () => {
      controller.abort()
      console.log('Fetch aborted for user', userId)
    }
  }, [userId])
  
  if (isLoading) return <p>Loading...</p>
  return <div>{user.name}</div>
}

// When userId changes:
// 1. Cleanup aborts old request
// 2. Effect starts new request
// Prevents race conditions and unnecessary state updates!

5. Cleaning Up External Libraries

cleanup-libraries.jsx

function Map({ center }) {
  const mapRef = React.useRef(null)
  
  React.useEffect(() => {
    // Initialize external library
    const map = new MapLibrary(mapRef.current, {
      center: center,
      zoom: 10
    })
    
    console.log('Map initialized')
    
    // Cleanup: Destroy library instance
    return () => {
      map.destroy()
      console.log('Map destroyed')
    }
  }, [center])
  
  return <div ref={mapRef} style={{ height: '400px' }} />
}

// Examples: Map libraries, chart libraries, animation libraries
// Always check documentation for cleanup methods:
// - destroy(), remove(), dispose(), cleanup(), etc.

Understanding Cleanup Timing

cleanup-timing.jsx

function Example({ count }) {
  console.log('1. Component rendering, count =', count)
  
  React.useEffect(() => {
    console.log('3. Effect running, count =', count)
    
    return () => {
      console.log('2. Cleanup running, previous count =', count)
    }
  }, [count])
  
  console.log('4. Render complete')
  
  return <p>Count: {count}</p>
}

// First render (count = 0):
// "1. Component rendering, count = 0"
// "4. Render complete"
// (browser paints)
// "3. Effect running, count = 0"

// Second render (count = 1):
// "1. Component rendering, count = 1"
// "4. Render complete"
// (browser paints)
// "2. Cleanup running, previous count = 0"  ← Cleanup for old effect
// "3. Effect running, count = 1"             ← New effect

// Component unmounts:
// "2. Cleanup running, previous count = 1"  ← Final cleanup

// Key point: Cleanup runs BEFORE next effect or on unmount

Cleanup Execution Order:

Component renders with new values
Browser paints the screen
Cleanup function runs (if effect ran before)
New effect function runs

The cleanup has access to the OLD values from the previous render!

Interactive Demo

ReactPlayground.jsx

Code Editor

function App() {
  const [showTimer, setShowTimer] = React.useState(true);
  const [showTracker, setShowTracker] = React.useState(true);
  const [logs, setLogs] = React.useState([]);

const addLog = (message) => {
    setLogs(prev => [...prev, `${new Date().toLocaleTimeString()}: ${message}`]);
  };

return (
    <div className="p-8 max-w-2xl mx-auto">
      <div className="bg-white rounded-xl shadow-lg p-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-6">
          Cleanup Functions Demo
        </h1>

<div className="space-y-6">
          {/* Controls */}
          <div className="p-6 bg-blue-50 rounded-lg">
            <h2 className="text-xl font-semibold text-blue-900 mb-4">
              Toggle Components
            </h2>
            <div className="flex gap-4">
              <button
                onClick={() => setShowTimer(!showTimer)}
                className={`px-4 py-2 rounded-lg font-semibold ${
                  showTimer
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-300 text-gray-700'
                }`}
              >
                {showTimer ? 'Hide' : 'Show'} Timer
              </button>
              <button
                onClick={() => setShowTracker(!showTracker)}
                className={`px-4 py-2 rounded-lg font-semibold ${
                  showTracker
                    ? 'bg-green-600 text-white'
                    : 'bg-gray-300 text-gray-700'
                }`}
              >
                {showTracker ? 'Hide' : 'Show'} Mouse Tracker
              </button>
            </div>
          </div>

{/* Timer Component */}
          {showTimer && <Timer addLog={addLog} />}

{/* Mouse Tracker Component */}
          {showTracker && <MouseTracker addLog={addLog} />}

{/* Event Log */}
          <div className="p-6 bg-gray-50 rounded-lg">
            <h2 className="text-xl font-semibold text-gray-900 mb-4">
              Cleanup Event Log
            </h2>
            <button
              onClick={() => setLogs([])}
              className="mb-3 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 text-sm"
            >
              Clear Log
            </button>
            <div className="bg-white rounded border border-gray-300 p-4 max-h-64 overflow-y-auto">
              {logs.length === 0 ? (
                <p className="text-gray-500 text-sm">
                  Toggle components to see cleanup in action
                </p>
              ) : (
                logs.map((log, i) => (
                  <p key={i} className="text-sm text-gray-700 font-mono mb-1">
                    {log}
                  </p>
                ))
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Timer({ addLog }) {
  const [count, setCount] = React.useState(0);

React.useEffect(() => {
    addLog('Timer: Effect started, setting up interval');

const intervalId = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);

return () => {
      clearInterval(intervalId);
      addLog('Timer: Cleanup ran, interval cleared');
    };
  }, []);

return (
    <div className="p-6 bg-blue-50 rounded-lg">
      <h2 className="text-xl font-semibold text-blue-900 mb-4">
        Timer Component
      </h2>
      <p className="text-3xl font-bold text-blue-900">{count}</p>
      <p className="text-sm text-blue-700 mt-2">
        Counting seconds (cleanup clears interval on unmount)
      </p>
    </div>
  );
}

function MouseTracker({ addLog }) {
  const [position, setPosition] = React.useState({ x: 0, y: 0 });

React.useEffect(() => {
    addLog('Tracker: Effect started, adding event listener');

const handleMouseMove = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

window.addEventListener('mousemove', handleMouseMove);

return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      addLog('Tracker: Cleanup ran, event listener removed');
    };
  }, []);

return (
    <div className="p-6 bg-green-50 rounded-lg">
      <h2 className="text-xl font-semibold text-green-900 mb-4">
        Mouse Tracker Component
      </h2>
      <p className="text-lg font-semibold text-green-900">
        X: {position.x}, Y: {position.y}
      </p>
      <p className="text-sm text-green-700 mt-2">
        Move your mouse (cleanup removes listener on unmount)
      </p>
    </div>
  );
}

Preview

💡 Tip: Edit the code above and click "Run" to see your changes

When Is Cleanup Needed?

✅ You NEED Cleanup For:

Timers - setInterval, setTimeout
Event listeners - addEventListener
Subscriptions - WebSocket, Firebase, etc.
Fetch requests - AbortController
External libraries - Maps, charts, animations
Browser APIs - requestAnimationFrame, IntersectionObserver

❌ You DON'T Need Cleanup For:

Regular state updates - setState is safe
localStorage/sessionStorage - No active connection
Simple calculations - No ongoing process
Console.log - Already completed

💡 Rule of Thumb

If your effect:
• Starts something ongoing (timer, listener, subscription)
• Creates a connection that stays open
• Registers something that needs unregistering

Then you NEED cleanup!

If your effect just:
• Updates state once
• Reads/writes storage once
• Logs something

Then cleanup is NOT needed.

Common Cleanup Mistakes

1. Forgetting to Return Cleanup Function

mistake-no-return.jsx

// ❌ Wrong - Memory leak!
React.useEffect(() => {
  const id = setInterval(() => {
    console.log('Running...')
  }, 1000)
  
  clearInterval(id)  // This runs immediately, doesn't help!
}, [])

// ✅ Correct - Return cleanup function
React.useEffect(() => {
  const id = setInterval(() => {
    console.log('Running...')
  }, 1000)
  
  return () => clearInterval(id)  // Cleanup function
}, [])

2. Not Saving ID for Cleanup

mistake-no-id.jsx

// ❌ Wrong - Can't clear interval!
React.useEffect(() => {
  setInterval(() => {
    console.log('Running...')
  }, 1000)
  
  return () => clearInterval(???)  // What ID to clear?
}, [])

// ✅ Correct - Save ID
React.useEffect(() => {
  const id = setInterval(() => {
    console.log('Running...')
  }, 1000)
  
  return () => clearInterval(id)  // Clear the right interval
}, [])

3. Using Async Function as Cleanup

mistake-async-cleanup.jsx

// ❌ Wrong - Cleanup can't be async!
React.useEffect(() => {
  return async () => {
    await someAsyncCleanup()  // This won't work!
  }
}, [])

// ✅ Correct - Call async function inside cleanup
React.useEffect(() => {
  return () => {
    someAsyncCleanup()  // Fire and forget
    // Or wrap in promise if you need error handling
    someAsyncCleanup().catch(console.error)
  }
}, [])

4. Missing Dependencies Affects Cleanup

mistake-deps-cleanup.jsx

// ❌ Wrong - Cleanup uses stale roomId
function Chat({ roomId }) {
  React.useEffect(() => {
    chatAPI.subscribe(roomId)
    
    return () => {
      chatAPI.unsubscribe(roomId)  // Uses current roomId, but might be stale!
    }
  }, [])  // Missing roomId dependency!
}

// ✅ Correct - Include roomId in dependencies
function Chat({ roomId }) {
  React.useEffect(() => {
    chatAPI.subscribe(roomId)
    
    return () => {
      chatAPI.unsubscribe(roomId)  // Uses roomId from effect's closure
    }
  }, [roomId])  // When roomId changes, cleanup uses old value, effect uses new
}

Key Takeaways

Cleanup functions prevent memory leaks and bugs
Return a function from useEffect to run cleanup
Cleanup runs before effect re-runs and on unmount
Always clear timers: clearInterval, clearTimeout
Always remove event listeners: removeEventListener
Always unsubscribe from subscriptions
Abort fetch requests with AbortController
Destroy external library instances
Cleanup has access to old values from previous render
Not all effects need cleanup - only ongoing processes
Save IDs/references needed for cleanup
Cleanup functions can't be async
Missing cleanup causes memory leaks and React warnings

What's Next?

You now understand cleanup functions and how to prevent memory leaks! You know when cleanup is needed and how to implement it properly for different scenarios.

In the next lesson, you'll learn about Dependency Arrays:

Understanding exactly when effects run
Common dependency array mistakes
Infinite loop prevention
When to use empty array vs no array
Optimizing effect execution

Get ready to master dependency arrays and control your effects precisely! 🎯