← Back to Demo Hub
Test #12React & Next.js Specific

Missing useEffect Cleanup

Event listeners or subscriptions not cleaned up when component unmounts.

📋 Demo Instructions

  1. Click "Start Test" to begin the async operation
  2. Then navigate away (use Back button) before it completes
  3. Wait 5-10 seconds for the error to be captured
  4. Go to Dashboard → Performance Monitoring
  5. Click "Fix with Carla" on the error
  6. Review the generated PR
🌍 Real-World Scenario
Component adds event listeners for scroll, resize, or WebSocket connections but doesn't remove them on unmount. This causes memory leaks and can lead to errors when the listeners try to update state on unmounted components.
✅ Expected Fix
Return a cleanup function from useEffect that removes event listeners, clears intervals/timeouts, and closes subscriptions.
Fix Confidence:HIGH

💻 Buggy Code

// Buggy Code
useEffect(() => {
  const handleScroll = () => {
    console.log('Scrolled:', window.scrollY);
  };

  window.addEventListener('scroll', handleScroll);
  // Missing cleanup - memory leak!
}, []);
// Memory leak: event listener persists after unmount

🔴 Error Log

Waiting for error to be triggered...

Memory Leak Demo:

Counter (will keep running after unmount): 0

This interval is not cleaned up and will continue running even after you navigate away!