cleanup event listeners

Author: a-hariti

src/components/focus-active-link.tsx

@@ -12,26 +12,31 @@ export function ScrollActiveLink({activeLinkSelector}: Props) {
   useEffect(() => {
     const sidebar = document.querySelector('[data-sidebar-link]')?.closest('aside');
     if (!sidebar) {
-      return;
+      const noOp = () => {};
+      return noOp;
     }
-    sidebar.addEventListener('click', e => {
+    const onLinkClick = (e: Event) => {
       const target = e.target as HTMLElement;
       if (target.hasAttribute('data-sidebar-link')) {
         const top = target.getBoundingClientRect().top;
         sessionStorage.setItem('sidebar-link-poisition', top.toString());
       }
-    });
+    };
+    sidebar.addEventListener('click', onLinkClick);
     // track active link position on scroll as well
-    sidebar.addEventListener(
-      'scroll',
-      debounce(() => {
-        const activeLink = document.querySelector(activeLinkSelector);
-        if (activeLink) {
-          const top = activeLink.getBoundingClientRect().top.toString();
-          sessionStorage.setItem('sidebar-link-poisition', top);
-        }
-      }, 50)
-    );
+    const onSidebarSroll = debounce(() => {
+      const activeLink = document.querySelector(activeLinkSelector);
+      if (activeLink) {
+        const top = activeLink.getBoundingClientRect().top.toString();
+        sessionStorage.setItem('sidebar-link-poisition', top);
+      }
+    }, 50);
+
+    sidebar.addEventListener('scroll', onSidebarSroll);
+    return () => {
+      sidebar.removeEventListener('click', onLinkClick);
+      sidebar.removeEventListener('scroll', onSidebarSroll);
+    };
   }, [activeLinkSelector]);
 
   useEffect(() => {