Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
Bug: Memory leak in attribute-behavior fixture - wrong variable cleared in componentWillUnmount | GoodFirstPicks

Bug: Memory leak in attribute-behavior fixture - wrong variable cleared in componentWillUnmount

facebook/react 1 comments 1mo ago
View on GitHub
easyopenScope: clearSkill match: yesReactJavaScriptTypeScript

Why this is a good first issue

The issue involves a straightforward variable mismatch in a lifecycle method.

AI Summary

The issue identifies a memory leak caused by incorrectly clearing `this.interval` instead of `this.timeout` in the `componentWillUnmount` method. The fix requires changing one line of code to correctly clear the timeout. There are no apparent blockers or additional complexities.

Issue Description

Bug Description

In fixtures/attribute-behavior/src/App.js, the componentWillUnmount method has a bug where it checks for this.timeout but clears this.interval (which doesn't exist). This causes a memory leak where timeouts are never properly cleaned up on component unmount.

Location: fixtures/attribute-behavior/src/App.js:605


Code Analysis

Current (Buggy) Code: componentWillUnmount() { if (this.timeout) { clearTimeout(this.interval); // ❌ Error: this.interval is undefined } }

Proposed Fix: componentWillUnmount() { if (this.timeout) { clearTimeout(this.timeout); // ✅ Correct: matches the variable being tracked } }


Steps To Reproduce

  1. Navigate to the fixtures/attribute-behavior directory.
  2. Run the build and dev server: yarn build --type=UMD_DEV react/index,react-dom && cd fixtures/attribute-behavior && yarn install && yarn dev
  3. Open the fixture in a browser.
  4. Hover over a result cell to trigger onMouseEnter (which sets this.timeout).
  5. Unmount the component before the timeout fires (e.g., navigate away or close the tab).
  6. Observe: The timeout is never cleared, which can lead to memory leaks or setState warnings on unmounted components.

Current Behavior

When the component unmounts, the code checks for this.timeout but calls clearTimeout(this.interval). Since this.interval is undefined, the actual timer remains active, potentially causing "cannot update state on an unmounted component" warnings.

Expected Behavior

The componentWillUnmount lifecycle should correctly call clearTimeout(this.timeout) to ensure the specific timer initiated by the component is destroyed immediately upon unmounting.


Suggested Fix (Diff)

--- fixtures/attribute-behavior/src/App.js +++ fixtures/attribute-behavior/src/App.js @@ -603,5 +603,5 @@ componentWillUnmount() { if (this.timeout) {

  •  clearTimeout(this.interval);
    
  •  clearTimeout(this.timeout);
    
    } }

GitHub Labels

Status: Unconfirmed

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 5 points when you complete it!

Loading labels...

Details

Points5 pts
Difficultyeasy
Scopeclear
Skill Matchyes
Test Focusedno