From ae6086fcf3f989133c4e9cff9752123fff5acb27 Mon Sep 17 00:00:00 2001
From: Atul Madhugiri <atulm@berkeley.edu>
Date: Wed, 13 Sep 2023 14:26:41 -0400
Subject: [PATCH] [native] Lift `renderItem` to `ConnectedChatThreadList`

Summary:
This diff is just one step in the process of converting ChatThreadList into a functional component. When this work is done, we will be able to avoid a lot of re-rendering and hopefully improve performance quite a bit.

---

Depends on D9172

Test Plan: ChatThreadList + search experience continue to work as expected.

Reviewers: ginsu, tomek, rohan

Reviewed By: ginsu

Subscribers: ashoat

Differential Revision: https://phab.comm.dev/D9173
---
 native/chat/chat-thread-list.react.js | 62 ++++++++++++++++-----------
 1 file changed, 37 insertions(+), 25 deletions(-)

diff --git a/native/chat/chat-thread-list.react.js b/native/chat/chat-thread-list.react.js
index 6170f7b3ca..1101631c23 100644
--- a/native/chat/chat-thread-list.react.js
+++ b/native/chat/chat-thread-list.react.js
@@ -139,6 +139,7 @@ type Props = {
   ) => void,
   +onPressSeeMoreSidebars: (threadInfo: ThreadInfo) => void,
   +hardwareBack: () => boolean,
+  +renderItem: (row: { item: Item, ... }) => React.Node,
 };
 
 class ChatThreadList extends React.PureComponent<Props> {
@@ -225,30 +226,6 @@ class ChatThreadList extends React.PureComponent<Props> {
     }
   };
 
-  renderItem = (row: { item: Item, ... }) => {
-    const item = row.item;
-    if (item.type === 'search') {
-      return (
-        <TouchableWithoutFeedback onPress={this.props.onSearchFocus}>
-          {this.props.renderSearch({ active: false })}
-        </TouchableWithoutFeedback>
-      );
-    }
-    if (item.type === 'empty') {
-      const EmptyItem = item.emptyItem;
-      return <EmptyItem />;
-    }
-    return (
-      <ChatThreadListItem
-        data={item}
-        onPressItem={this.props.onPressItem}
-        onPressSeeMoreSidebars={this.props.onPressSeeMoreSidebars}
-        onSwipeableWillOpen={this.props.onSwipeableWillOpen}
-        currentlyOpenedSwipeableId={this.props.openedSwipeableID}
-      />
-    );
-  };
-
   listDataSelector = createSelector(
     (props: Props) => props.chatListData,
     (props: Props) => props.searchStatus,
@@ -341,7 +318,7 @@ class ChatThreadList extends React.PureComponent<Props> {
         {fixedSearch}
         <FlatList
           data={this.listData}
-          renderItem={this.renderItem}
+          renderItem={this.props.renderItem}
           keyExtractor={keyExtractor}
           getItemLayout={getItemLayout}
           extraData={extraData}
@@ -636,6 +613,40 @@ function ConnectedChatThreadList(props: BaseProps): React.Node {
     return true;
   }, [navigation, onSearchCancel, searchStatus]);
 
+  const renderItem = React.useCallback(
+    (row: { item: Item, ... }) => {
+      const item = row.item;
+      if (item.type === 'search') {
+        return (
+          <TouchableWithoutFeedback onPress={onSearchFocus}>
+            {renderSearch({ active: false })}
+          </TouchableWithoutFeedback>
+        );
+      }
+      if (item.type === 'empty') {
+        const EmptyItem = item.emptyItem;
+        return <EmptyItem />;
+      }
+      return (
+        <ChatThreadListItem
+          data={item}
+          onPressItem={onPressItem}
+          onPressSeeMoreSidebars={onPressSeeMoreSidebars}
+          onSwipeableWillOpen={onSwipeableWillOpen}
+          currentlyOpenedSwipeableId={openedSwipeableID}
+        />
+      );
+    },
+    [
+      onPressItem,
+      onPressSeeMoreSidebars,
+      onSearchFocus,
+      onSwipeableWillOpen,
+      openedSwipeableID,
+      renderSearch,
+    ],
+  );
+
   return (
     <ChatThreadList
       navigation={navigation}
@@ -676,6 +687,7 @@ function ConnectedChatThreadList(props: BaseProps): React.Node {
       onPressItem={onPressItem}
       onPressSeeMoreSidebars={onPressSeeMoreSidebars}
       hardwareBack={hardwareBack}
+      renderItem={renderItem}
     />
   );
 }