optimize calendar year scroll rendering

Author: Sergey

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

@@ -1,37 +1,13 @@
 import { Text } from '@gravity-ui/uikit';
 import { CalendarYear as CalendarYearModel, CalendarMonth as CalendarMonthModel } from '@repo/models';
-import { ICalendarYear, YearID } from '@repo/types';
 import { memo, useMemo } from 'react';
 
 import CalendarMonth from './CalendarMonth';
 
 import s from './CalendarYear.module.scss';
 
-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 = yearModelCache.get(yearId);
-
-  if (existing) {
-    return existing;
-  }
-
-  const model = new CalendarYearModel(yearId);
-
-  yearModelCache.set(yearId, model);
-
-  if (yearModelCache.size > MAX_YEARS_CACHE_SIZE) {
-    const [oldestKey] = yearModelCache.keys();
-
-    yearModelCache.delete(oldestKey);
-  }
-
-  return model;
-};
+const MAX_MONTHS_CACHE_SIZE = 1200;
 
 const getMonthModel = (monthId: string): CalendarMonthModel => {
   const existing = monthModelCache.get(monthId);
@@ -53,8 +29,7 @@ const getMonthModel = (monthId: string): CalendarMonthModel => {
   return model;
 };
 
-const CalendarYear: React.FC<{ yearId: YearID }> = ({ yearId }) => {
-  const model = getYearModel(yearId);
+const CalendarYear: React.FC<{ model: CalendarYearModel }> = ({ model }) => {
   const monthsModels = useMemo(() => model.getMonthsKeys().map(getMonthModel), [model]);
 
   return (
@@ -71,4 +46,4 @@ const CalendarYear: React.FC<{ yearId: YearID }> = ({ yearId }) => {
   );
 };
 
-export default memo(CalendarYear);
+export default memo(CalendarYear, (prev, next) => prev.model.id === next.model.id);

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

@@ -1,3 +1,4 @@
+import { CalendarYear as CalendarYearModel } from '@repo/models';
 import { VirtualListVertical } from '@repo/ui';
 import { yearID } from '@repo/utils/calendar';
 import React, { CSSProperties, memo, useCallback, useMemo } from 'react';
@@ -16,17 +17,35 @@ const CalendarYearScroll: React.FC = () => {
 
   const startYear = useMemo(() => Temporal.Now.plainDateTimeISO().year, []);
 
+  const yearModelCache = useMemo(() => new Map<number, CalendarYearModel>(), []);
+
   const getYearFromIndex = useCallback((index: number) => startYear + (index - MIDDLE_INDEX), [startYear]);
 
+  const getYearModel = useCallback(
+    (year: number) => {
+      if (!yearModelCache.has(year)) {
+        const model = new CalendarYearModel(yearID(year));
+
+        yearModelCache.set(year, model);
+      }
+
+      return yearModelCache.get(year)!;
+    },
+    [yearModelCache],
+  );
+
   const renderItem = useCallback(
     (index: number, style: CSSProperties) => {
+      const year = getYearFromIndex(index);
+      const model = getYearModel(year);
+
       return (
         <div style={style} data-index={index}>
-          <CalendarYear yearId={yearID(getYearFromIndex(index))} />
+          <CalendarYear model={model} />
         </div>
       );
     },
-    [getYearFromIndex],
+    [getYearFromIndex, getYearModel],
   );
 
   return (
@@ -36,6 +55,7 @@ const CalendarYearScroll: React.FC = () => {
           itemCount={TOTAL_YEARS}
           itemHeight={containerHeight}
           height={containerHeight}
+          overscan={3}
           initialScrollOffset={MIDDLE_INDEX * containerHeight}
           classNameInner={s.root__inner}
           renderItem={renderItem}

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

@@ -1,3 +1,5 @@
 .root {
   position: absolute;
+  contain: content;
+  will-change: transform;
 }

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

@@ -1,8 +1,7 @@
 import clsx from 'clsx';
-import { memo, CSSProperties, ReactNode } from 'react';
+import { memo, CSSProperties, ReactNode, useCallback, useRef, useState, useEffect } from 'react';
 
 import { VirtualListItem } from './VirtualListItem';
-import { useVirtualList } from './hooks/useVirtualList';
 
 import s from './VirtualListVertical.module.scss';
 
@@ -13,7 +12,7 @@ type VirtualListVerticalProps = {
   itemHeight: number;
   height: number;
   width?: string;
-  overscan?: number;
+  overscan: number;
   renderItem: (index: number, style: CSSProperties) => ReactNode;
   initialScrollOffset?: number;
 };
@@ -25,17 +24,39 @@ const VirtualListVertical: React.FC<VirtualListVerticalProps> = ({
   itemHeight,
   height,
   width = '100%',
-  overscan = 2,
+  overscan,
   renderItem,
   initialScrollOffset = 0,
 }) => {
-  const { containerRef, onScroll, startIndex, endIndex, totalHeight } = useVirtualList({
-    itemCount,
-    itemHeight,
-    height,
-    overscan,
-    initialScrollOffset,
-  });
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(initialScrollOffset);
+  const ticking = useRef(false);
+
+  const totalHeight = itemCount * itemHeight;
+
+  const handleScroll = useCallback(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    const scroll = containerRef.current.scrollTop;
+
+    if (!ticking.current) {
+      requestAnimationFrame(() => {
+        setScrollTop(scroll);
+        ticking.current = false;
+      });
+      ticking.current = true;
+    }
+  }, []);
+
+  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+  const endIndex = Math.min(itemCount - 1, Math.ceil((scrollTop + height) / itemHeight) + overscan);
+
+  useEffect(() => {
+    if (containerRef.current && initialScrollOffset > 0) {
+      containerRef.current.scrollTop = initialScrollOffset;
+    }
+  }, [initialScrollOffset]);
 
   const items = [];
 
@@ -54,22 +75,11 @@ const VirtualListVertical: React.FC<VirtualListVerticalProps> = ({
   return (
     <div
       ref={containerRef}
-      onScroll={onScroll}
+      onScroll={handleScroll}
       className={clsx(s.root, className)}
-      style={{
-        height,
-        width,
-        position: 'relative',
-        overflow: 'auto',
-      }}
+      style={{ height, width, position: 'relative', overflow: 'auto' }}
     >
-      <div
-        style={{
-          height: totalHeight,
-          position: 'relative',
-        }}
-        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

@@ -4,25 +4,34 @@ type UseVirtualListParams = {
   itemCount: number;
   itemHeight: number;
   height: number;
-  overscan?: number;
+  overscan: number;
   initialScrollOffset?: number;
 };
 
 export function useVirtualList({
   itemCount,
   itemHeight,
   height,
-  overscan = 5,
+  overscan,
   initialScrollOffset = 0,
 }: UseVirtualListParams) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [scrollTop, setScrollTop] = useState(initialScrollOffset);
   const visibleRangeRef = useRef({ start: 0, end: 0 });
+  const tickingRef = useRef(false);
 
   const totalHeight = itemCount * itemHeight;
 
   const onScroll = useCallback((e: UIEvent<HTMLDivElement>) => {
-    setScrollTop(e.currentTarget.scrollTop);
+    const scroll = e.currentTarget.scrollTop;
+
+    if (!tickingRef.current) {
+      window.requestAnimationFrame(() => {
+        setScrollTop(scroll);
+        tickingRef.current = false;
+      });
+      tickingRef.current = true;
+    }
   }, []);
 
   const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);