RN: Fix Unstable Component in FlatList-multiColumn (#51673)

Summary:
Pull Request resolved: #51673

Fixes a lint warning that seems to inconsistently fire, by improving the code that it complains about.

Changelog:
[Internal]

Reviewed By: javache

Differential Revision: D75583443

fbshipit-source-id: b6df191e2e51dee688df3f3c960704dea28a4ece

Author: yungsters

packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js

@@ -28,7 +28,7 @@ import {
 import RNTesterPage from '../../components/RNTesterPage';
 import RNTesterText from '../../components/RNTesterText';
 import * as React from 'react';
-import {useState} from 'react';
+import {useCallback, useState} from 'react';
 import {Alert, FlatList, StyleSheet, View} from 'react-native';
 
 function MultiColumnExample(): React.Node {
@@ -66,20 +66,33 @@ function MultiColumnExample(): React.Node {
     return {length, offset: length * index, index};
   };
 
-  // eslint-disable-next-line react/no-unstable-nested-components
-  const _renderItemComponent = ({
-    item,
-  }: ListRenderItemInfo<any | Item>): $FlowFixMe => {
-    return (
-      <View style={styles.card}>
-        <ItemComponent
-          item={item}
-          fixedHeight={fixedHeight}
-          onPress={_pressItem}
-        />
-      </View>
-    );
-  };
+  const _pressItem = useCallback(
+    (key: string) => {
+      const index = Number(key);
+      const itemState = pressItem(data[index]);
+      setData(state => [
+        ...state.slice(0, index),
+        itemState,
+        ...state.slice(index + 1),
+      ]);
+    },
+    [data],
+  );
+
+  const _renderItemComponent = useCallback(
+    ({item}: ListRenderItemInfo<any | Item>): $FlowFixMe => {
+      return (
+        <View style={styles.card}>
+          <ItemComponent
+            item={item}
+            fixedHeight={fixedHeight}
+            onPress={_pressItem}
+          />
+        </View>
+      );
+    },
+    [_pressItem, fixedHeight],
+  );
 
   // This is called when items change viewability by scrolling into or out of the viewable area.
   const _onViewableItemsChanged = (info: {
@@ -102,16 +115,6 @@ function MultiColumnExample(): React.Node {
     }
   };
 
-  const _pressItem = (key: string) => {
-    const index = Number(key);
-    const itemState = pressItem(data[index]);
-    setData(state => [
-      ...state.slice(0, index),
-      itemState,
-      ...state.slice(index + 1),
-    ]);
-  };
-
   const filterRegex = new RegExp(String(filterText), 'i');
   const filter = (item: any | Item) =>
     filterRegex.test(item.text) || filterRegex.test(item.title);