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

setState After Unmount

Updating component state after the component has already unmounted.

📋 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
User navigates away from a page while an async API call is still in progress. When the API call completes, it tries to update state on a component that no longer exists, causing a memory leak warning.
✅ Expected Fix
Add a cleanup function with a mounted flag or AbortController to cancel pending operations when component unmounts.
Fix Confidence:MEDIUM

💻 Buggy Code

// Buggy Code
useEffect(() => {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      setData(data); // Error if component unmounted
    });
}, []);
// Warning: Can't perform a React state update on an unmounted component

🔴 Error Log

Waiting for error to be triggered...