Fix CellRenderer onCellFocusCapture not being stable (#41381)

Summary:
Pull Request resolved: #41381

Noticed that when scrolling VirtualizedList's CellRenderer was re-rendering due to `onCellFocusCapture` not having a stable identify. Change the interface to CellRenderer to pass in the `cellKey` in the callback to save on creating new callbacks.

Changelog: [Internal]

Reviewed By: sammy-SC

Differential Revision: D51112928

fbshipit-source-id: 3fcb974d9b5585403895746fbc45f2cf5a9fa6b1

packages/virtualized-lists/Lists/VirtualizedList.js

@@ -824,7 +824,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
           key={key}
           prevCellKey={prevCellKey}
           onUpdateSeparators={this._onUpdateSeparators}
-          onCellFocusCapture={e => this._onCellFocusCapture(key)}
+          onCellFocusCapture={this._onCellFocusCapture}
           onUnmount={this._onCellUnmount}
           ref={ref => {
             this._cellRefs[key] = ref;
@@ -1314,10 +1314,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     this._updateViewableItems(this.props, this.state.cellsAroundViewport);
   };
 
-  _onCellFocusCapture(cellKey: string) {
+  _onCellFocusCapture = (cellKey: string) => {
     this._lastFocusedCellKey = cellKey;
     this._updateCellsToRender();
-  }
+  };
 
   _onCellUnmount = (cellKey: string) => {
     delete this._cellRefs[cellKey];

packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js

@@ -32,7 +32,7 @@ export type Props<ItemT> = {
   inversionStyle: ViewStyleProp,
   item: ItemT,
   onCellLayout?: (event: LayoutEvent, cellKey: string, index: number) => void,
-  onCellFocusCapture?: (event: FocusEvent) => void,
+  onCellFocusCapture?: (cellKey: string) => void,
   onUnmount: (cellKey: string) => void,
   onUpdateSeparators: (
     cellKeys: Array<?string>,
@@ -115,12 +115,15 @@ export default class CellRenderer<ItemT> extends React.Component<
   }
 
   _onLayout = (nativeEvent: LayoutEvent): void => {
-    this.props.onCellLayout &&
-      this.props.onCellLayout(
-        nativeEvent,
-        this.props.cellKey,
-        this.props.index,
-      );
+    this.props.onCellLayout?.(
+      nativeEvent,
+      this.props.cellKey,
+      this.props.index,
+    );
+  };
+
+  _onCellFocusCapture = (e: FocusEvent): void => {
+    this.props.onCellFocusCapture?.(this.props.cellKey);
   };
 
   _renderElement(
@@ -174,7 +177,6 @@ export default class CellRenderer<ItemT> extends React.Component<
       item,
       index,
       inversionStyle,
-      onCellFocusCapture,
       onCellLayout,
       renderItem,
     } = this.props;
@@ -206,7 +208,7 @@ export default class CellRenderer<ItemT> extends React.Component<
     const result = !CellRendererComponent ? (
       <View
         style={cellStyle}
-        onFocusCapture={onCellFocusCapture}
+        onFocusCapture={this._onCellFocusCapture}
         {...(onCellLayout && {onLayout: this._onLayout})}>
         {element}
         {itemSeparator}
@@ -217,7 +219,7 @@ export default class CellRenderer<ItemT> extends React.Component<
         index={index}
         item={item}
         style={cellStyle}
-        onFocusCapture={onCellFocusCapture}
+        onFocusCapture={this._onCellFocusCapture}
         {...(onCellLayout && {onLayout: this._onLayout})}>
         {element}
         {itemSeparator}