Variable size list and grid no longer call item size getters when count is 0

Author: Brian Vaughn

src/__tests__/VariableSizeGrid.js

@@ -5,7 +5,7 @@ import { VariableSizeGrid } from '..';
 const findScrollContainer = rendered => rendered.root.children[0].children[0];
 
 describe('VariableSizeGrid', () => {
-  let itemRenderer, defaultProps, onItemsRendered;
+  let columnWidth, defaultProps, itemRenderer, onItemsRendered, rowHeight;
 
   // Use PureComponent to test memoization.
   // Pass through to itemRenderer mock for easier test assertions.
@@ -30,21 +30,39 @@ describe('VariableSizeGrid', () => {
       <div style={style}>{JSON.stringify(rest, null, 2)}</div>
     ));
     onItemsRendered = jest.fn();
+    columnWidth = jest.fn(index => 50 + index);
+    rowHeight = jest.fn(index => 25 + index);
     defaultProps = {
       children: PureItemRenderer,
       columnCount: 10,
-      columnWidth: index => 50 + index,
+      columnWidth,
       height: 100,
       onItemsRendered,
       rowCount: 20,
-      rowHeight: index => 25 + index,
+      rowHeight,
       width: 200,
     };
   });
 
   // Much of the shared Grid functionality is already tested by VariableSizeGrid tests.
   // This test covers functionality that is unique to VariableSizeGrid.
 
+  it('should render an empty grid', () => {
+    ReactTestRenderer.create(
+      <VariableSizeGrid {...defaultProps} columnCount={0} rowCount={0} />
+    );
+    ReactTestRenderer.create(
+      <VariableSizeGrid {...defaultProps} columnCount={0} />
+    );
+    ReactTestRenderer.create(
+      <VariableSizeGrid {...defaultProps} rowCount={0} />
+    );
+    expect(itemRenderer).not.toHaveBeenCalled();
+    expect(columnWidth).not.toHaveBeenCalled();
+    expect(rowHeight).not.toHaveBeenCalled();
+    expect(onItemsRendered).not.toHaveBeenCalled();
+  });
+
   it('changing item size does not impact the rendered items', () => {
     const rendered = ReactTestRenderer.create(
       <VariableSizeGrid {...defaultProps} />

src/__tests__/VariableSizeList.js

@@ -5,7 +5,7 @@ import { VariableSizeList } from '..';
 const findScrollContainer = rendered => rendered.root.children[0].children[0];
 
 describe('VariableSizeList', () => {
-  let itemRenderer, defaultProps, onItemsRendered;
+  let itemRenderer, itemSize, defaultProps, onItemsRendered;
 
   // Use PureComponent to test memoization.
   // Pass through to itemRenderer mock for easier test assertions.
@@ -21,13 +21,14 @@ describe('VariableSizeList', () => {
     itemRenderer = jest.fn(({ style, ...rest }) => (
       <div style={style}>{JSON.stringify(rest, null, 2)}</div>
     ));
+    itemSize = jest.fn(index => 25 + index);
     onItemsRendered = jest.fn();
     defaultProps = {
       children: PureItemRenderer,
       estimatedItemSize: 25,
       height: 100,
       itemCount: 20,
-      itemSize: index => 25 + index,
+      itemSize,
       onItemsRendered,
       width: 50,
     };
@@ -36,6 +37,15 @@ describe('VariableSizeList', () => {
   // Much of the shared List functionality is already tested by FixedSizeList tests.
   // This test covers functionality that is unique to VariableSizeList.
 
+  it('should render an empty list', () => {
+    ReactTestRenderer.create(
+      <VariableSizeList {...defaultProps} itemCount={0} />
+    );
+    expect(itemSize).not.toHaveBeenCalled();
+    expect(itemRenderer).not.toHaveBeenCalled();
+    expect(onItemsRendered).not.toHaveBeenCalled();
+  });
+
   it('changing itemSize does not impact the rendered items', () => {
     const rendered = ReactTestRenderer.create(
       <VariableSizeList {...defaultProps} />

src/createGridComponent.js

@@ -501,9 +501,13 @@ export default function createGridComponent({
     _getItemStyleCache = memoizeOne((_, __) => ({}));
 
     _getHorizontalRangeToRender(): [number, number, number, number] {
-      const { columnCount, overscanCount } = this.props;
+      const { columnCount, overscanCount, rowCount } = this.props;
       const { horizontalScrollDirection, scrollLeft } = this.state;
 
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
       const startIndex = getColumnStartIndexForOffset(
         this.props,
         scrollLeft,
@@ -536,9 +540,13 @@ export default function createGridComponent({
     }
 
     _getVerticalRangeToRender(): [number, number, number, number] {
-      const { rowCount, overscanCount } = this.props;
+      const { columnCount, rowCount, overscanCount } = this.props;
       const { verticalScrollDirection, scrollTop } = this.state;
 
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
       const startIndex = getRowStartIndexForOffset(
         this.props,
         scrollTop,

src/createListComponent.js

@@ -416,6 +416,10 @@ export default function createListComponent({
       const { itemCount, overscanCount } = this.props;
       const { scrollDirection, scrollOffset } = this.state;
 
+      if (itemCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
       const startIndex = getStartIndexForOffset(
         this.props,
         scrollOffset,