perf: skipping re-rendering

package.json

@@ -60,6 +60,7 @@
     "rc-animate": "^2.9.1",
     "react": "^v16.9.0-alpha.0",
     "react-dom": "^v16.9.0-alpha.0",
+    "sinon": "^15.0.1",
     "typescript": "^4.0.0"
   },
   "dependencies": {

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;

tests/props.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import sinon from 'sinon';
 import List from '../src';
 
 describe('Props', () => {
@@ -11,33 +12,47 @@ describe('Props', () => {
     }
 
     const wrapper = mount(
-      <List data={[{ id: 903 }, { id: 1128 }]} itemKey={item => item.id}>
+      <List data={[{ id: 903 }, { id: 1128 }]} itemKey={(item) => item.id}>
         {({ id }) => <ItemComponent>{id}</ItemComponent>}
       </List>,
     );
 
-    expect(
-      wrapper
-        .find('Item')
-        .at(0)
-        .key(),
-    ).toBe('903');
-
-    expect(
-      wrapper
-        .find('Item')
-        .at(1)
-        .key(),
-    ).toBe('1128');
+    expect(wrapper.find('Item').at(0).key()).toBe('903');
+
+    expect(wrapper.find('Item').at(1).key()).toBe('1128');
   });
 
   it('prefixCls', () => {
     const wrapper = mount(
-      <List data={[0]} itemKey={id => id} prefixCls="prefix">
-        {id => <div>{id}</div>}
+      <List data={[0]} itemKey={(id) => id} prefixCls="prefix">
+        {(id) => <div>{id}</div>}
       </List>,
     );
 
     expect(wrapper.find('.prefix-holder-inner').length).toBeTruthy();
   });
+
+  it('no unnecessary re-render', () => {
+    const renderItem = sinon.fake(({ id, key }) => <div key={key}>{id}</div>);
+    const data = [{ id: 1, key: 1 }];
+    function Wrapper() {
+      const [state, setState] = React.useState(0);
+
+      React.useEffect(() => {
+        setState(1);
+      }, []);
+
+      return (
+        <div>
+          <h1>{state}</h1>
+          <List data={data} itemKey="key" prefixCls="prefix">
+            {renderItem}
+          </List>
+        </div>
+      );
+    }
+    const wrapper = mount(<Wrapper />);
+    expect(wrapper.find('h1').text()).toBe('1');
+    expect(renderItem.callCount).toBe(1);
+  });
 });

tests/scroll.test.js

@@ -52,7 +52,9 @@ describe('List.Scroll', () => {
     jest.useFakeTimers();
     const listRef = React.createRef();
     const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100), ref: listRef });
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
 
     listRef.current.scrollTo(null);
     expect(wrapper.find('.rc-virtual-list-scrollbar-thumb').props().style.display).not.toEqual(
@@ -65,8 +67,10 @@ describe('List.Scroll', () => {
     it('value scroll', () => {
       const listRef = React.createRef();
       const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100), ref: listRef });
-      listRef.current.scrollTo(903);
-      jest.runAllTimers();
+      act(() => {
+        listRef.current.scrollTo(903);
+        jest.runAllTimers();
+      });
       expect(wrapper.find('ul').instance().scrollTop).toEqual(903);
 
       wrapper.unmount();
@@ -79,40 +83,56 @@ describe('List.Scroll', () => {
 
     describe('index scroll', () => {
       it('work', () => {
-        listRef.current.scrollTo({ index: 30, align: 'top' });
-        jest.runAllTimers();
+        act(() => {
+          listRef.current.scrollTo({ index: 30, align: 'top' });
+          jest.runAllTimers();
+        });
         expect(wrapper.find('ul').instance().scrollTop).toEqual(600);
       });
 
       it('out of range should not crash', () => {
         expect(() => {
-          listRef.current.scrollTo({ index: 99999999999, align: 'top' });
-          jest.runAllTimers();
+          act(() => {
+            listRef.current.scrollTo({ index: 99999999999, align: 'top' });
+            jest.runAllTimers();
+          });
         }).not.toThrow();
       });
     });
 
     it('scroll top should not out of range', () => {
-      listRef.current.scrollTo({ index: 0, align: 'bottom' });
-      jest.runAllTimers();
+      act(() => {
+        listRef.current.scrollTo({ index: 0, align: 'bottom' });
+        jest.runAllTimers();
+      });
       expect(wrapper.find('ul').instance().scrollTop).toEqual(0);
     });
 
     it('key scroll', () => {
-      listRef.current.scrollTo({ key: '30', align: 'bottom' });
-      jest.runAllTimers();
+      act(() => {
+        listRef.current.scrollTo({ key: '30', align: 'bottom' });
+        jest.runAllTimers();
+      });
       expect(wrapper.find('ul').instance().scrollTop).toEqual(520);
     });
 
     it('smart', () => {
-      listRef.current.scrollTo(0);
-      listRef.current.scrollTo({ index: 30 });
-      jest.runAllTimers();
+      act(() => {
+        listRef.current.scrollTo(0);
+      });
+      act(() => {
+        listRef.current.scrollTo({ index: 30 });
+        jest.runAllTimers();
+      });
       expect(wrapper.find('ul').instance().scrollTop).toEqual(520);
 
-      listRef.current.scrollTo(800);
-      listRef.current.scrollTo({ index: 30 });
-      jest.runAllTimers();
+      act(() => {
+        listRef.current.scrollTo(800);
+      });
+      act(() => {
+        listRef.current.scrollTo({ index: 30 });
+        jest.runAllTimers();
+      });
       expect(wrapper.find('ul').instance().scrollTop).toEqual(600);
     });
   });