VirtualizedList CellRenderer optimization

Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -59,7 +59,7 @@ class ScrollViewStickyHeader extends React.Component<Props, State> {
     this.props.onLayout(event);
     const child = React.Children.only(this.props.children);
     if (child.props.onLayout) {
-      child.props.onLayout(event);
+      child.props.onLayout(event, child.props.cellKey, child.props.index);
     }
   };
 

Libraries/Lists/VirtualizedList.js

@@ -672,6 +672,10 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       getItemCount,
       horizontal,
       keyExtractor,
+      getItemLayout,
+      renderItem,
+      extraData,
+      debug,
     } = this.props;
     const stickyOffset = this.props.ListHeaderComponent ? 1 : 0;
     const end = getItemCount(data) - 1;
@@ -697,9 +701,12 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           key={key}
           prevCellKey={prevCellKey}
           onUpdateSeparators={this._onUpdateSeparators}
-          onLayout={e => this._onCellLayout(e, key, ii)}
+          onLayout={this._onCellLayout}
           onUnmount={this._onCellUnmount}
-          parentProps={this.props}
+          getItemLayout={getItemLayout}
+          renderItem={renderItem}
+          extraData={extraData}
+          debug={debug}
           ref={ref => {
             this._cellRefs[key] = ref;
           }}
@@ -1063,7 +1070,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     }
   };
 
-  _onCellLayout(e, cellKey, index) {
+  _onCellLayout = (e, cellKey, index): void => {
     const layout = e.nativeEvent.layout;
     const next = {
       offset: this._selectOffset(layout),
@@ -1103,7 +1110,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     }
 
     this._computeBlankness();
-  }
+  };
 
   _onCellUnmount = (cellKey: string) => {
     const curr = this._frames[cellKey];
@@ -1617,7 +1624,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   }
 }
 
-class CellRenderer extends React.Component<
+class CellRenderer extends React.PureComponent<
   {
     CellRendererComponent?: ?React.ComponentType<any>,
     ItemSeparatorComponent: ?React.ComponentType<*>,
@@ -1627,14 +1634,13 @@ class CellRenderer extends React.Component<
     index: number,
     inversionStyle: ViewStyleProp,
     item: Item,
-    onLayout: (event: Object) => void, // This is extracted by ScrollViewStickyHeader
+    onLayout: (event: Object, key: string, index: number) => void, // This is extracted by ScrollViewStickyHeader
     onUnmount: (cellKey: string) => void,
     onUpdateSeparators: (cellKeys: Array<?string>, props: Object) => void,
-    parentProps: {
-      getItemLayout?: ?Function,
-      renderItem: renderItemType,
-    },
     prevCellKey: ?string,
+    getItemLayout?: ?Function,
+    renderItem: renderItemType,
+    debug: ?boolean,
   },
   $FlowFixMeState,
 > {
@@ -1693,6 +1699,10 @@ class CellRenderer extends React.Component<
     this.props.onUnmount(this.props.cellKey);
   }
 
+  _onLayout = (e): void =>
+    this.props.onLayout &&
+    this.props.onLayout(e, this.props.cellKey, this.props.index);
+
   render() {
     const {
       CellRendererComponent,
@@ -1702,9 +1712,10 @@ class CellRenderer extends React.Component<
       item,
       index,
       inversionStyle,
-      parentProps,
+      renderItem,
+      getItemLayout,
+      debug,
     } = this.props;
-    const {renderItem, getItemLayout} = parentProps;
     invariant(renderItem, 'no renderItem!');
     const element = renderItem({
       item,
@@ -1715,9 +1726,9 @@ class CellRenderer extends React.Component<
       /* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an
        * error found when Flow v0.68 was deployed. To see the error delete this
        * comment and run Flow. */
-      getItemLayout && !parentProps.debug && !fillRateHelper.enabled()
+      getItemLayout && !debug && !fillRateHelper.enabled()
         ? undefined
-        : this.props.onLayout;
+        : this._onLayout;
     // NOTE: that when this is a sticky header, `onLayout` will get automatically extracted and
     // called explicitly by `ScrollViewStickyHeader`.
     const itemSeparator = ItemSeparatorComponent && (

Libraries/Lists/__tests__/VirtualizedList-test.js

@@ -218,4 +218,59 @@ describe('VirtualizedList', () => {
       }),
     );
   });
+
+  it('calls _onCellLayout properly', () => {
+    const items = [{key: 'i1'}, {key: 'i2'}, {key: 'i3'}];
+    const mock = jest.fn();
+    const component = ReactTestRenderer.create(
+      <VirtualizedList
+        data={items}
+        renderItem={({item}) => <item value={item.key} />}
+        getItem={(data, index) => data[index]}
+        getItemCount={data => data.length}
+      />,
+    );
+    const virtualList: VirtualizedList = component.getInstance();
+    virtualList._onCellLayout = mock;
+    component.update(
+      <VirtualizedList
+        data={[...items, {key: 'i4'}]}
+        renderItem={({item}) => <item value={item.key} />}
+        getItem={(data, index) => data[index]}
+        getItemCount={data => data.length}
+      />,
+    );
+    const cell = virtualList._cellRefs.i4;
+    const event = {
+      nativeEvent: {layout: {x: 0, y: 0, width: 50, height: 50}},
+    };
+    cell._onLayout(event);
+    expect(mock).toHaveBeenCalledWith(event, 'i4', 3);
+  });
+
+  it('handles extraData correctly', () => {
+    const mock = jest.fn();
+    const data = [{key: 'i0'}, {key: 'i1'}, {key: 'i2'}];
+    const getItem = (data, index) => data[index];
+    const getItemCount = data => data.length;
+    const component = ReactTestRenderer.create(
+      <VirtualizedList
+        data={data}
+        renderItem={mock}
+        getItem={getItem}
+        getItemCount={getItemCount}
+      />,
+    );
+
+    component.update(
+      <VirtualizedList
+        data={data}
+        renderItem={mock}
+        getItem={getItem}
+        getItemCount={getItemCount}
+        extraData={{updated: false}}
+      />,
+    );
+    expect(mock).toHaveBeenCalledTimes(6);
+  });
 });