fix: correct comment grammar, improve sidebar component display name and fixed potential memory leak issue in useNavigationState

Author: malav2110

apps/site/components/withSidebar.tsx

@@ -36,7 +36,7 @@ const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
   useNavigationState('sidebar', sidebarRef);
 
   const mappedSidebarItems =
-    // If there's only a single navigation key, use it's sub-items
+    // If there's only a single navigation key, use its sub-items
     // as our navigation.
     (navKeys.length === 1 ? sideNavigation[0][1].items : sideNavigation).map(
       ([, { label, items }]) => ({

apps/site/hooks/client/useNavigationState.ts

@@ -1,9 +1,8 @@
 'use client';
 
-import { useContext, useEffect } from 'react';
+import { useCallback, useContext, useEffect, useRef } from 'react';
 
 import { NavigationStateContext } from '#site/providers/navigationStateProvider';
-import { debounce } from '#site/util/objects';
 
 import type { RefObject } from 'react';
 
@@ -13,26 +12,40 @@ const useNavigationState = <T extends HTMLElement>(
   debounceTime = 300
 ) => {
   const navigationState = useContext(NavigationStateContext);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-  const handleScroll = debounce(() => {
-    if (ref.current) {
-      navigationState[id] = {
-        x: ref.current.scrollLeft,
-        y: ref.current.scrollTop,
-      };
+  const handleScroll = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
     }
-  }, debounceTime);
+
+    timeoutRef.current = setTimeout(() => {
+      if (ref.current) {
+        navigationState[id] = {
+          x: ref.current.scrollLeft,
+          y: ref.current.scrollTop,
+        };
+      }
+    }, debounceTime);
+  }, [id, ref, navigationState, debounceTime]);
 
   useEffect(() => {
     const element = ref.current;
     if (element) {
       if (navigationState[id] && navigationState[id].y !== element.scrollTop) {
-        element.scroll({ top: navigationState[id].y, behavior: 'instant' });
+        element.scroll({ top: navigationState[id].y, behavior: 'auto' });
       }
 
       element.addEventListener('scroll', handleScroll, { passive: true });
 
-      return () => element.removeEventListener('scroll', handleScroll);
+      return () => {
+        element.removeEventListener('scroll', handleScroll);
+        // Clear any pending debounced calls
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
+        }
+      };
     }
     // We need this effect to run only on mount
     // eslint-disable-next-line react-hooks/exhaustive-deps

packages/ui-components/src/Containers/Sidebar/index.tsx

@@ -61,4 +61,6 @@ const SideBar = forwardRef<HTMLElement, PropsWithChildren<SidebarProps>>(
   }
 );
 
+SideBar.displayName = 'SideBar';
+
 export default SideBar;