fix: Item render will also collect heights (#58)

* fix: Item render will also collect heights

* update test case

Author: zombieJ

src/Filler.tsx

@@ -48,7 +48,7 @@ const Filler: React.FC<FillerProps> = ({
     <div style={outerStyle}>
       <ResizeObserver
         onResize={({ offsetHeight }) => {
-          if (offsetHeight) {
+          if (offsetHeight && onInnerResize) {
             onInnerResize();
           }
         }}

src/hooks/useHeights.tsx

@@ -14,13 +14,41 @@ 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);
+
+  function collectHeight() {
+    heightUpdateIdRef.current += 1;
+    const currentId = heightUpdateIdRef.current;
+
+    Promise.resolve().then(() => {
+      // Only collect when it's latest call
+      if (currentId !== heightUpdateIdRef.current) return;
+
+      let changed = false;
+
+      instanceRef.current.forEach((element, key) => {
+        if (element && element.offsetParent) {
+          const htmlElement = findDOMNode<HTMLElement>(element);
+          const { offsetHeight } = htmlElement;
+          if (heightsRef.current.get(key) !== offsetHeight) {
+            changed = true;
+            heightsRef.current.set(key, htmlElement.offsetHeight);
+          }
+        }
+      });
+      if (changed) {
+        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);
     }
@@ -35,23 +63,5 @@ export default function useHeights<T>(
     }
   }
 
-  function collectHeight() {
-    let changed = false;
-
-    instanceRef.current.forEach((element, key) => {
-      if (element && element.offsetParent) {
-        const htmlElement = findDOMNode<HTMLElement>(element);
-        const { offsetHeight } = htmlElement;
-        if (heightsRef.current.get(key) !== offsetHeight) {
-          changed = true;
-          heightsRef.current.set(key, htmlElement.offsetHeight);
-        }
-      }
-    });
-    if (changed) {
-      setUpdatedMark(c => c + 1);
-    }
-  }
-
   return [setInstanceRef, collectHeight, heightsRef.current, updatedMark];
 }

tests/list.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import List from '../src';
 import Filler from '../src/Filler';
 import { spyElementPrototypes } from './utils/domHook';
@@ -188,7 +189,7 @@ describe('List.Basic', () => {
       mockElement.mockRestore();
     });
 
-    it('work', () => {
+    it('work', async () => {
       const wrapper = genList({ itemHeight: 20, height: 40, data: genData(3) });
       wrapper
         .find('Filler')
@@ -197,6 +198,11 @@ describe('List.Basic', () => {
         .onResize({ offsetHeight: 0 });
       expect(collected).toBeFalsy();
 
+      // Wait for collection
+      await act(async () => {
+        await Promise.resolve();
+      });
+
       wrapper
         .find('Filler')
         .find('ResizeObserver')