fix calendar year scroll memory leak

Author: Sergey

apps/core/src/features/calendar/CalendarYearScroll/CalendarYear/CalendarYear.tsx

@@ -1,40 +1,61 @@
 import { Text } from '@gravity-ui/uikit';
 import { CalendarYear as CalendarYearModel, CalendarMonth as CalendarMonthModel } from '@repo/models';
 import { ICalendarYear, YearID } from '@repo/types';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 
 import CalendarMonth from './CalendarMonth';
 
 import s from './CalendarYear.module.scss';
 
-const MAX_CACHE_SIZE = 100;
-const modelCache = new Map<string, ICalendarYear>();
+const MAX_YEARS_CACHE_SIZE = 100;
+const MAX_MONTHS_CACHE_SIZE = MAX_YEARS_CACHE_SIZE * 12;
+
+const yearModelCache = new Map<string, ICalendarYear>();
+const monthModelCache = new Map<string, CalendarMonthModel>();
 
 const getYearModel = (yearId: string): CalendarYearModel => {
-  const existing = modelCache.get(yearId);
+  const existing = yearModelCache.get(yearId);
 
   if (existing) {
-    modelCache.set(yearId, existing);
-
     return existing;
   }
 
   const model = new CalendarYearModel(yearId);
 
-  modelCache.set(yearId, model);
+  yearModelCache.set(yearId, model);
+
+  if (yearModelCache.size > MAX_YEARS_CACHE_SIZE) {
+    const [oldestKey] = yearModelCache.keys();
+
+    yearModelCache.delete(oldestKey);
+  }
+
+  return model;
+};
+
+const getMonthModel = (monthId: string): CalendarMonthModel => {
+  const existing = monthModelCache.get(monthId);
+
+  if (existing) {
+    return existing;
+  }
+
+  const model = new CalendarMonthModel(monthId);
+
+  monthModelCache.set(monthId, model);
 
-  if (modelCache.size > MAX_CACHE_SIZE) {
-    const [oldestKey] = modelCache.keys();
+  if (monthModelCache.size > MAX_MONTHS_CACHE_SIZE) {
+    const [oldestKey] = monthModelCache.keys();
 
-    modelCache.delete(oldestKey);
+    monthModelCache.delete(oldestKey);
   }
 
   return model;
 };
 
 const CalendarYear: React.FC<{ yearId: YearID }> = ({ yearId }) => {
   const model = getYearModel(yearId);
-  const monthsModels = model.getMonthsKeys().map((monthId) => new CalendarMonthModel(monthId));
+  const monthsModels = useMemo(() => model.getMonthsKeys().map(getMonthModel), [model]);
 
   return (
     <div className={s.root}>

apps/core/src/features/calendar/CalendarYearScroll/CalendarYearScroll.tsx

@@ -1,32 +1,33 @@
 import { VirtualListVertical } from '@repo/ui';
 import { yearID } from '@repo/utils/calendar';
-import React, { CSSProperties, useCallback } from 'react';
+import React, { CSSProperties, memo, useCallback, useMemo } from 'react';
 import { Temporal } from 'temporal-polyfill';
 
 import CalendarYear from './CalendarYear';
 import { useContainerHeight } from './hooks/useContainerHeight';
 
 import s from './CalendarYearScroll.module.scss';
 
-const NOW = Temporal.Now.plainDateTimeISO();
-const START_YEAR = NOW.year;
 const TOTAL_YEARS = 500;
 const MIDDLE_INDEX = Math.floor(TOTAL_YEARS / 2);
 
-const getYearFromIndex = (index: number) => {
-  return START_YEAR + (index - MIDDLE_INDEX);
-};
-
 const CalendarYearScroll: React.FC = () => {
   const { containerRef, containerHeight } = useContainerHeight();
 
-  const renderItem = useCallback((index: number, style: CSSProperties) => {
-    return (
-      <div style={style} data-index={index}>
-        <CalendarYear yearId={yearID(getYearFromIndex(index))} />
-      </div>
-    );
-  }, []);
+  const startYear = useMemo(() => Temporal.Now.plainDateTimeISO().year, []);
+
+  const getYearFromIndex = useCallback((index: number) => startYear + (index - MIDDLE_INDEX), [startYear]);
+
+  const renderItem = useCallback(
+    (index: number, style: CSSProperties) => {
+      return (
+        <div style={style} data-index={index}>
+          <CalendarYear yearId={yearID(getYearFromIndex(index))} />
+        </div>
+      );
+    },
+    [getYearFromIndex],
+  );
 
   return (
     <div ref={containerRef} className={s.root}>
@@ -44,4 +45,4 @@ const CalendarYearScroll: React.FC = () => {
   );
 };
 
-export default CalendarYearScroll;
+export default memo(CalendarYearScroll);

apps/core/src/features/calendar/CalendarYearScroll/hooks/useContainerHeight.tsx

@@ -1,30 +1,28 @@
 import { debounce } from '@repo/utils/debounce';
-import { useEffect, useState, useRef, useMemo } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 export const useContainerHeight = (debounceDelay = 100) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [containerHeight, setContainerHeight] = useState(0);
 
-  const handleResize = useMemo(
-    () =>
-      debounce((height: number) => {
-        if (height > 0 && height !== containerHeight) {
-          setContainerHeight(height);
-        }
-      }, debounceDelay),
-    [debounceDelay, containerHeight],
-  );
-
   useEffect(() => {
     if (!containerRef.current) {
       return;
     }
 
+    const debouncedSetHeight = debounce((height: number) => {
+      setContainerHeight((prev) => {
+        if (height > 0 && height !== prev) {
+          return height;
+        }
+
+        return prev;
+      });
+    }, debounceDelay);
+
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
-        const newHeight = entry.contentRect.height;
-
-        handleResize(newHeight);
+        debouncedSetHeight(entry.contentRect.height);
       }
     });
 
@@ -36,7 +34,10 @@ export const useContainerHeight = (debounceDelay = 100) => {
       setContainerHeight(initialHeight);
     }
 
-    return () => resizeObserver.disconnect();
+    return () => {
+      resizeObserver.disconnect();
+      debouncedSetHeight.cancel();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

packages/ui/src/components/VirtualListVertical/VirtualListItem/VirtualListItem.module.scss

@@ -0,0 +1,3 @@
+.root {
+  position: absolute;
+}

packages/ui/src/components/VirtualListVertical/VirtualListItem/VirtualListItem.tsx

@@ -0,0 +1,25 @@
+import { CSSProperties, memo, ReactNode } from 'react';
+
+import s from './VirtualListItem.module.scss';
+
+type VirtualItemProps = {
+  index: number;
+  style: CSSProperties;
+  itemHeight: number;
+  renderItem: (index: number, style: CSSProperties) => ReactNode;
+};
+
+const VirtualListItem = ({ index, style, itemHeight, renderItem }: VirtualItemProps) => {
+  return (
+    <div data-index={index} className={s.root} style={style}>
+      {renderItem(index, {
+        height: itemHeight,
+        width: '100%',
+      })}
+    </div>
+  );
+};
+
+export default memo(VirtualListItem, (prev, next) => {
+  return prev.index === next.index && prev.itemHeight === next.itemHeight;
+});

packages/ui/src/components/VirtualListVertical/VirtualListItem/index.ts

@@ -0,0 +1 @@
+export { default as VirtualListItem } from './VirtualListItem';

packages/ui/src/components/VirtualListVertical/VirtualListVertical.module.scss

@@ -6,7 +6,3 @@
     position: relative;
   }
 }
-
-.item {
-  position: absolute;
-}

packages/ui/src/components/VirtualListVertical/VirtualListVertical.tsx

@@ -1,5 +1,8 @@
 import clsx from 'clsx';
-import { useRef, useState, UIEvent, useCallback, memo, useEffect, useMemo, CSSProperties, ReactNode } from 'react';
+import { memo, CSSProperties, ReactNode } from 'react';
+
+import { VirtualListItem } from './VirtualListItem';
+import { useVirtualList } from './hooks/useVirtualList';
 
 import s from './VirtualListVertical.module.scss';
 
@@ -26,54 +29,27 @@ const VirtualListVertical: React.FC<VirtualListVerticalProps> = ({
   renderItem,
   initialScrollOffset = 0,
 }) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const prevScrollTop = useRef(initialScrollOffset);
-  const [scrollTop, setScrollTop] = useState(initialScrollOffset);
-  const totalHeight = itemCount * itemHeight;
-
-  const onScroll = useCallback((e: UIEvent<HTMLDivElement>) => {
-    const target = e.currentTarget;
-    const newScrollTop = target.scrollTop;
-
-    prevScrollTop.current = newScrollTop;
-    setScrollTop(newScrollTop);
-  }, []);
-
-  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
-  const endIndex = Math.min(itemCount - 1, Math.ceil((scrollTop + height) / itemHeight) + overscan);
-
-  const items = useMemo(() => {
-    const items = [];
+  const { containerRef, onScroll, startIndex, endIndex, totalHeight } = useVirtualList({
+    itemCount,
+    itemHeight,
+    height,
+    overscan,
+    initialScrollOffset,
+  });
 
-    for (let i = startIndex; i <= endIndex; i++) {
-      items.push(
-        <div
-          key={i}
-          data-index={i}
-          className={s.item}
-          style={{
-            top: i * itemHeight,
-            height: itemHeight,
-            width: '100%',
-          }}
-        >
-          {renderItem(i, {
-            height: itemHeight,
-            width: '100%',
-          })}
-        </div>,
-      );
-    }
+  const items = [];
 
-    return items;
-  }, [startIndex, endIndex, itemHeight, renderItem]);
+  for (let i = startIndex; i <= endIndex; i++) {
+    const style: CSSProperties = {
+      height: itemHeight,
+      width: '100%',
+      position: 'absolute',
+      top: i * itemHeight,
+      left: 0,
+    };
 
-  useEffect(() => {
-    containerRef.current?.scrollTo({
-      top: initialScrollOffset,
-      behavior: 'instant',
-    });
-  }, [initialScrollOffset]);
+    items.push(<VirtualListItem key={i} index={i} style={style} itemHeight={itemHeight} renderItem={renderItem} />);
+  }
 
   return (
     <div
@@ -83,9 +59,17 @@ const VirtualListVertical: React.FC<VirtualListVerticalProps> = ({
       style={{
         height,
         width,
+        position: 'relative',
+        overflow: 'auto',
       }}
     >
-      <div style={{ height: totalHeight }} className={clsx(s.root__inner, classNameInner)}>
+      <div
+        style={{
+          height: totalHeight,
+          position: 'relative',
+        }}
+        className={clsx(s.root__inner, classNameInner)}
+      >
         {items}
       </div>
     </div>

packages/ui/src/components/VirtualListVertical/hooks/useVirtualList.ts

@@ -0,0 +1,47 @@
+import { useRef, useState, useCallback, useEffect, UIEvent } from 'react';
+
+type UseVirtualListParams = {
+  itemCount: number;
+  itemHeight: number;
+  height: number;
+  overscan?: number;
+  initialScrollOffset?: number;
+};
+
+export function useVirtualList({
+  itemCount,
+  itemHeight,
+  height,
+  overscan = 5,
+  initialScrollOffset = 0,
+}: UseVirtualListParams) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(initialScrollOffset);
+  const visibleRangeRef = useRef({ start: 0, end: 0 });
+
+  const totalHeight = itemCount * itemHeight;
+
+  const onScroll = useCallback((e: UIEvent<HTMLDivElement>) => {
+    setScrollTop(e.currentTarget.scrollTop);
+  }, []);
+
+  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+  const endIndex = Math.min(itemCount - 1, Math.ceil((scrollTop + height) / itemHeight) + overscan);
+
+  visibleRangeRef.current = { start: startIndex, end: endIndex };
+
+  useEffect(() => {
+    if (containerRef.current && initialScrollOffset > 0) {
+      containerRef.current.scrollTop = initialScrollOffset;
+    }
+  }, [initialScrollOffset]);
+
+  return {
+    containerRef,
+    onScroll,
+    startIndex,
+    endIndex,
+    totalHeight,
+    visibleRangeRef,
+  };
+}