Skip to content

🐛 Bug: Sidebar resize listener never removed - memory leak on navigation #2241

@PRINCEjain0

Description

@PRINCEjain0

Describe the bug

In components/Sidebar.tsx (lines 207–215), a useEffect adds a window resize listener but does not remove it on unmount. Each time you navigate to a page that uses the Sidebar and then leave, a new listener stays attached. Over time, this causes multiple handlers on window, extra work on every resize, and a small memory leak.

Steps To Reproduce

  1. Go to a page that uses the Sidebar (e.g. any docs or learn page under /docs).
  2. Navigate away to another section, then back to a page with the Sidebar. Repeat several times.
  3. Resize the browser window, the resize handler runs once per time the Sidebar was mounted (multiple times).
  4. In DevTools, you can confirm multiple listeners on window for resize if the component is mounted/unmounted repeatedly.

Expected Behavior

On unmount, the effect should remove the resize listener (e.g. return () => window.removeEventListener('resize', handleResize)). Only one listener should be active while the Sidebar is mounted.

Screenshots

Image

Device Information [optional]

- Browser: chrome

Are you working on this issue?

Yes

Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)

No

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: TriageThis is the initial status for an issue that requires triage.🐛 BugIndicates that the issue is a bug or defect.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions