Fix Memory Leaks Caused by Uncleaned Event Listeners

[Manishnemade12]

Description

Several React components in the website use window.addEventListener('resize', ...) and window.addEventListener('scroll', ...) to trigger UI changes based on viewport size or scroll position. However, many components omit the corresponding window.removeEventListener() inside the useEffect cleanup hook (e.g. src/components/Animated-steps-list/scroll-position.js, src/components/Scrolltotop-button/useWindowHasScrolled.js, src/sections/Community/Members-grid/index.js). Since Gatsby acts as a Single Page Application (SPA), navigating across the site causes these global listeners to stack up, ultimately creating memory leaks and severe scroll-jank.

Expected Behavior

All components using window.addEventListener within hooks should implement the standard React cleanup methodology. They should return a cleanup function (e.g. return () => window.removeEventListener('scroll', handleScroll);) from their useEffect hooks. This ensures no overlapping listeners, prevents memory leaks on long browser sessions, and recoups client-side CPU resources.

Screenshots

Environment:

• Host OS:
• Browser:

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[Manishnemade12]

Some can please assign me that issue

[rishiraj38]

@Manishnemade12, please wait for a reviewer to mark the issue as valid before submitting a PR. The files you mentioned in your issue description are already fixed.