diff --git a/native/chat/chat-thread-list-item.react.js b/native/chat/chat-thread-list-item.react.js --- a/native/chat/chat-thread-list-item.react.js +++ b/native/chat/chat-thread-list-item.react.js @@ -61,32 +61,45 @@ data.sidebars.filter(sidebarItem => sidebarItem.type === 'sidebar').length - 1; - const sidebars = data.sidebars.map((sidebarItem, index) => { - if (sidebarItem.type === 'sidebar') { - const { type, ...sidebarInfo } = sidebarItem; - return ( - <ChatThreadListSidebar - sidebarInfo={sidebarInfo} - onPressItem={onPressItem} - onSwipeableWillOpen={onSwipeableWillOpen} - currentlyOpenedSwipeableId={currentlyOpenedSwipeableId} - key={sidebarItem.threadInfo.id} - extendArrow={index < numOfSidebarsWithExtendedArrow} - /> - ); - } else if (sidebarItem.type === 'seeMore') { - return ( - <ChatThreadListSeeMoreSidebars - threadInfo={data.threadInfo} - unread={sidebarItem.unread} - onPress={onPressSeeMoreSidebars} - key="seeMore" - /> - ); - } else { - return <View style={styles.spacer} key="spacer" />; - } - }); + const sidebars = React.useMemo( + () => + data.sidebars.map((sidebarItem, index) => { + if (sidebarItem.type === 'sidebar') { + const { type, ...sidebarInfo } = sidebarItem; + return ( + <ChatThreadListSidebar + sidebarInfo={sidebarInfo} + onPressItem={onPressItem} + onSwipeableWillOpen={onSwipeableWillOpen} + currentlyOpenedSwipeableId={currentlyOpenedSwipeableId} + key={sidebarItem.threadInfo.id} + extendArrow={index < numOfSidebarsWithExtendedArrow} + /> + ); + } else if (sidebarItem.type === 'seeMore') { + return ( + <ChatThreadListSeeMoreSidebars + threadInfo={data.threadInfo} + unread={sidebarItem.unread} + onPress={onPressSeeMoreSidebars} + key="seeMore" + /> + ); + } else { + return <View style={styles.spacer} key="spacer" />; + } + }), + [ + currentlyOpenedSwipeableId, + data.sidebars, + data.threadInfo, + numOfSidebarsWithExtendedArrow, + onPressItem, + onPressSeeMoreSidebars, + onSwipeableWillOpen, + styles.spacer, + ], + ); const onPress = React.useCallback(() => { onPressItem(data.threadInfo, data.pendingPersonalThreadUserInfo); diff --git a/native/chat/chat-thread-list-sidebar.react.js b/native/chat/chat-thread-list-sidebar.react.js --- a/native/chat/chat-thread-list-sidebar.react.js +++ b/native/chat/chat-thread-list-sidebar.react.js @@ -66,6 +66,11 @@ ], ); + const sidebarItem = React.useMemo( + () => <SidebarItem sidebarInfo={sidebarInfo} />, + [sidebarInfo], + ); + const swipeableThread = React.useMemo( () => ( <View style={styles.swipeableThreadContainer}> @@ -76,14 +81,16 @@ currentlyOpenedSwipeableId={currentlyOpenedSwipeableId} iconSize={16} > - <SidebarItem sidebarInfo={sidebarInfo} /> + {sidebarItem} </SwipeableThread> </View> ), [ currentlyOpenedSwipeableId, onSwipeableWillOpen, - sidebarInfo, + sidebarInfo.mostRecentNonLocalMessage, + sidebarInfo.threadInfo, + sidebarItem, styles.swipeableThreadContainer, ], );