perf: skipping re-rendering

Author: muzea

src/Filler.tsx

@@ -46,14 +46,19 @@ const Filler = React.forwardRef(
       };
     }
 
+    const handleResize = React.useCallback(
+      ({ offsetHeight }) => {
+        if (offsetHeight && onInnerResize) {
+          onInnerResize();
+        }
+      },
+      [onInnerResize],
+    );
+
     return (
       <div style={outerStyle}>
         <ResizeObserver
-          onResize={({ offsetHeight }) => {
-            if (offsetHeight && onInnerResize) {
-              onInnerResize();
-            }
-          }}
+          onResize={handleResize}
         >
           <div
             style={innerStyle}

src/List.tsx

@@ -102,9 +102,11 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     [itemKey],
   );
 
-  const sharedConfig: SharedConfig<T> = {
-    getKey,
-  };
+  const sharedConfig: SharedConfig<T> = React.useMemo(() => {
+    return {
+      getKey,
+    };
+  }, [getKey]);
 
   // ================================ Scroll ================================
   function syncScrollTop(newTop: number | ((prev: number) => number)) {

src/hooks/useChildren.tsx

@@ -10,17 +10,19 @@ export default function useChildren<T>(
   renderFunc: RenderFunc<T>,
   { getKey }: SharedConfig<T>,
 ) {
-  return list.slice(startIndex, endIndex + 1).map((item, index) => {
-    const eleIndex = startIndex + index;
-    const node = renderFunc(item, eleIndex, {
-      // style: status === 'MEASURE_START' ? { visibility: 'hidden' } : {},
-    }) as React.ReactElement;
+  return React.useMemo(() => {
+    return list.slice(startIndex, endIndex + 1).map((item, index) => {
+      const eleIndex = startIndex + index;
+      const node = renderFunc(item, eleIndex, {
+        // style: status === 'MEASURE_START' ? { visibility: 'hidden' } : {},
+      }) as React.ReactElement;
 
-    const key = getKey(item);
-    return (
-      <Item key={key} setRef={ele => setNodeRef(item, ele)}>
-        {node}
-      </Item>
-    );
-  });
+      const key = getKey(item);
+      return (
+        <Item key={key} setRef={(ele) => setNodeRef(item, ele)}>
+          {node}
+        </Item>
+      );
+    });
+  }, [list, startIndex, endIndex, setNodeRef, renderFunc, getKey]);
 }

src/hooks/useHeights.tsx

@@ -15,11 +15,11 @@ export default function useHeights<T>(
   const heightsRef = useRef(new CacheMap());
   const collectRafRef = useRef<number>();
 
-  function cancelRaf() {
+  const cancelRaf = React.useCallback(function cancelRaf() {
     raf.cancel(collectRafRef.current);
-  }
+  }, []);
 
-  function collectHeight() {
+  const collectHeight = React.useCallback(function () {
     cancelRaf();
 
     collectRafRef.current = raf(() => {
@@ -36,28 +36,31 @@ export default function useHeights<T>(
       // Always trigger update mark to tell parent that should re-calculate heights when resized
       setUpdatedMark((c) => c + 1);
     });
-  }
-
-  function setInstanceRef(item: T, instance: HTMLElement) {
-    const key = getKey(item);
-    const origin = instanceRef.current.get(key);
+  }, []);
 
-    if (instance) {
-      instanceRef.current.set(key, instance);
-      collectHeight();
-    } else {
-      instanceRef.current.delete(key);
-    }
+  const setInstanceRef = React.useCallback(
+    function (item: T, instance: HTMLElement) {
+      const key = getKey(item);
+      const origin = instanceRef.current.get(key);
 
-    // Instance changed
-    if (!origin !== !instance) {
       if (instance) {
-        onItemAdd?.(item);
+        instanceRef.current.set(key, instance);
+        collectHeight();
       } else {
-        onItemRemove?.(item);
+        instanceRef.current.delete(key);
+      }
+
+      // Instance changed
+      if (!origin !== !instance) {
+        if (instance) {
+          onItemAdd?.(item);
+        } else {
+          onItemRemove?.(item);
+        }
       }
-    }
-  }
+    },
+    [getKey, onItemAdd, onItemRemove],
+  );
 
   useEffect(() => {
     return cancelRaf;