fix: ResizeObserver throws limit (#169)

Author: zombieJ

src/hooks/useHeights.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { useRef } from 'react';
+import { useRef, useEffect } from 'react';
 import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
+import raf from 'rc-util/lib/raf';
 import type { GetKey } from '../interface';
 import CacheMap from '../utils/CacheMap';
 
@@ -12,16 +13,16 @@ export default function useHeights<T>(
   const [updatedMark, setUpdatedMark] = React.useState(0);
   const instanceRef = useRef(new Map<React.Key, HTMLElement>());
   const heightsRef = useRef(new CacheMap());
-  const heightUpdateIdRef = useRef(0);
+  const collectRafRef = useRef<number>();
 
-  function collectHeight() {
-    heightUpdateIdRef.current += 1;
-    const currentId = heightUpdateIdRef.current;
+  function cancelRaf() {
+    raf.cancel(collectRafRef.current);
+  }
 
-    Promise.resolve().then(() => {
-      // Only collect when it's latest call
-      if (currentId !== heightUpdateIdRef.current) return;
+  function collectHeight() {
+    cancelRaf();
 
+    collectRafRef.current = raf(() => {
       instanceRef.current.forEach((element, key) => {
         if (element && element.offsetParent) {
           const htmlElement = findDOMNode<HTMLElement>(element);
@@ -33,7 +34,7 @@ export default function useHeights<T>(
       });
 
       // Always trigger update mark to tell parent that should re-calculate heights when resized
-      setUpdatedMark(c => c + 1);
+      setUpdatedMark((c) => c + 1);
     });
   }
 
@@ -58,5 +59,9 @@ export default function useHeights<T>(
     }
   }
 
+  useEffect(() => {
+    return cancelRaf;
+  }, []);
+
   return [setInstanceRef, collectHeight, heightsRef.current, updatedMark];
 }

tests/list.test.js

@@ -202,7 +202,9 @@ describe('List.Basic', () => {
 
       // Wait for collection
       await act(async () => {
-        await Promise.resolve();
+        await new Promise((resolve) => {
+          setTimeout(resolve, 10);
+        });
       });
 
       wrapper.find('Filler').find('ResizeObserver').props().onResize({ offsetHeight: 100 });