diff --git a/lib/selectors/chat-selectors.js b/lib/selectors/chat-selectors.js --- a/lib/selectors/chat-selectors.js +++ b/lib/selectors/chat-selectors.js @@ -200,6 +200,22 @@ }; } +function useCreateChatThreadItem(): ThreadInfo => ChatThreadItem { + const messageInfos = useSelector(messageInfoSelector); + const sidebarInfos = useSelector(sidebarInfoSelector); + const messageStore = useSelector(state => state.messageStore); + return React.useCallback( + threadInfo => + createChatThreadItem( + threadInfo, + messageStore, + messageInfos, + sidebarInfos[threadInfo.id], + ), + [messageInfos, messageStore, sidebarInfos], + ); +} + function useFlattenedChatListData(): $ReadOnlyArray { return useFilteredChatListData(threadInChatList); } @@ -208,25 +224,15 @@ filterFunction: (threadInfo: ?(ThreadInfo | RawThreadInfo)) => boolean, ): $ReadOnlyArray { const threadInfos = useSelector(threadInfoSelector); - const messageInfos = useSelector(messageInfoSelector); - const sidebarInfos = useSelector(sidebarInfoSelector); - const messageStore = useSelector(state => state.messageStore); - + const getChatThreadItem = useCreateChatThreadItem(); return React.useMemo( () => _flow( _filter(filterFunction), - _map((threadInfo: ThreadInfo): ChatThreadItem => - createChatThreadItem( - threadInfo, - messageStore, - messageInfos, - sidebarInfos[threadInfo.id], - ), - ), + _map(getChatThreadItem), _orderBy('lastUpdatedTimeIncludingSidebars')('desc'), )(threadInfos), - [messageInfos, messageStore, sidebarInfos, filterFunction, threadInfos], + [getChatThreadItem, filterFunction, threadInfos], ); } @@ -692,7 +698,7 @@ export { messageInfoSelector, - createChatThreadItem, + useCreateChatThreadItem, createChatMessageItems, messageListData, useFlattenedChatListData, diff --git a/web/selectors/chat-selectors.js b/web/selectors/chat-selectors.js --- a/web/selectors/chat-selectors.js +++ b/web/selectors/chat-selectors.js @@ -4,10 +4,8 @@ import { type ChatThreadItem, - createChatThreadItem, - messageInfoSelector, + useCreateChatThreadItem, } from 'lib/selectors/chat-selectors.js'; -import { sidebarInfoSelector } from 'lib/selectors/sidebar-selectors.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import { threadIsPending } from 'lib/shared/thread-utils.js'; import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; @@ -15,22 +13,13 @@ import { useSelector } from '../redux/redux-utils.js'; function useChatThreadItem(threadInfo: ?ThreadInfo): ?ChatThreadItem { - const messageInfos = useSelector(messageInfoSelector); - const sidebarInfos = useSelector(sidebarInfoSelector); - const messageStore = useSelector(state => state.messageStore); - + const createChatThreadItem = useCreateChatThreadItem(); return React.useMemo(() => { if (!threadInfo) { return null; } - - return createChatThreadItem( - threadInfo, - messageStore, - messageInfos, - sidebarInfos[threadInfo.id], - ); - }, [messageInfos, messageStore, sidebarInfos, threadInfo]); + return createChatThreadItem(threadInfo); + }, [createChatThreadItem, threadInfo]); } function useActiveChatThreadItem(): ?ChatThreadItem {