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:
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.
Join the Layer5 Community by submitting your community member form.
Description
Several React components in the website use
window.addEventListener('resize', ...)andwindow.addEventListener('scroll', ...)to trigger UI changes based on viewport size or scroll position. However, many components omit the correspondingwindow.removeEventListener()inside theuseEffectcleanup 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.addEventListenerwithin hooks should implement the standard React cleanup methodology. They should return a cleanup function (e.g.return () => window.removeEventListener('scroll', handleScroll);) from theiruseEffecthooks. This ensures no overlapping listeners, prevents memory leaks on long browser sessions, and recoups client-side CPU resources.Screenshots
Environment:
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the
masterbranch.