From 7b455588046dcdd59c5092bffb3fdbde38275925 Mon Sep 17 00:00:00 2001 From: MartinCupela Date: Mon, 19 Sep 2022 11:23:32 +0200 Subject: [PATCH 1/3] fix(VirtualizedMessageList): use memoized values as hook dependencies directly --- src/components/MessageList/VirtualizedMessageList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MessageList/VirtualizedMessageList.tsx b/src/components/MessageList/VirtualizedMessageList.tsx index f1bfcaf033..ca89d17a14 100644 --- a/src/components/MessageList/VirtualizedMessageList.tsx +++ b/src/components/MessageList/VirtualizedMessageList.tsx @@ -375,7 +375,7 @@ const VirtualizedMessageListWithContext = < return Item; }, [ customClasses?.virtualMessage, - Object.keys(messageGroupStyles), + messageGroupStyles, numItemsPrepended, processedMessages.length, ]); From 00959e2fc9a8aa86d72d525e06b95f96020e871b Mon Sep 17 00:00:00 2001 From: MartinCupela Date: Mon, 19 Sep 2022 11:46:16 +0200 Subject: [PATCH 2/3] style: document the use of processedMessages.length in hook dependency array --- src/components/MessageList/VirtualizedMessageList.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/MessageList/VirtualizedMessageList.tsx b/src/components/MessageList/VirtualizedMessageList.tsx index ca89d17a14..19875495ac 100644 --- a/src/components/MessageList/VirtualizedMessageList.tsx +++ b/src/components/MessageList/VirtualizedMessageList.tsx @@ -206,6 +206,7 @@ const VirtualizedMessageListWithContext = < if (style) acc[message.id] = style; return acc; }, {} as Record), + // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage [processedMessages.length, shouldGroupByUser], ); @@ -234,6 +235,7 @@ const VirtualizedMessageListWithContext = < virtuoso, processedMessages, setNewMessagesNotification, + // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage processedMessages.length, hasMoreNewer, jumpToLatestMessage, @@ -377,6 +379,7 @@ const VirtualizedMessageListWithContext = < customClasses?.virtualMessage, messageGroupStyles, numItemsPrepended, + // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage processedMessages.length, ]); From f51f2a635dfab54abfdb6a41aff55b1fd629926b Mon Sep 17 00:00:00 2001 From: MartinCupela Date: Mon, 19 Sep 2022 12:23:54 +0200 Subject: [PATCH 3/3] style: add generic type declaration to Array.reduce() calls --- src/components/ChannelList/hooks/usePaginatedChannels.ts | 1 + src/components/MessageList/VirtualizedMessageList.tsx | 4 ++-- src/components/MessageList/hooks/useEnrichedMessages.ts | 4 ++-- src/components/Reactions/hooks/useProcessReactions.tsx | 8 ++++---- 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/ChannelList/hooks/usePaginatedChannels.ts b/src/components/ChannelList/hooks/usePaginatedChannels.ts index 14665451b5..4f9dc5f3d0 100644 --- a/src/components/ChannelList/hooks/usePaginatedChannels.ts +++ b/src/components/ChannelList/hooks/usePaginatedChannels.ts @@ -26,6 +26,7 @@ export const usePaginatedChannels = < const [channels, setChannels] = useState>>([]); const [hasNextPage, setHasNextPage] = useState(true); + // memoize props const filterString = useMemo(() => JSON.stringify(filters), [filters]); const sortString = useMemo(() => JSON.stringify(sort), [sort]); diff --git a/src/components/MessageList/VirtualizedMessageList.tsx b/src/components/MessageList/VirtualizedMessageList.tsx index 19875495ac..1abcc1886e 100644 --- a/src/components/MessageList/VirtualizedMessageList.tsx +++ b/src/components/MessageList/VirtualizedMessageList.tsx @@ -196,7 +196,7 @@ const VirtualizedMessageListWithContext = < const groupStylesFn = groupStyles || getGroupStyles; const messageGroupStyles = useMemo( () => - processedMessages.reduce((acc, message, i) => { + processedMessages.reduce>((acc, message, i) => { const style = groupStylesFn( message, processedMessages[i - 1], @@ -205,7 +205,7 @@ const VirtualizedMessageListWithContext = < ); if (style) acc[message.id] = style; return acc; - }, {} as Record), + }, {}), // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage [processedMessages.length, shouldGroupByUser], ); diff --git a/src/components/MessageList/hooks/useEnrichedMessages.ts b/src/components/MessageList/hooks/useEnrichedMessages.ts index 95d24b9731..7db78b4486 100644 --- a/src/components/MessageList/hooks/useEnrichedMessages.ts +++ b/src/components/MessageList/hooks/useEnrichedMessages.ts @@ -65,7 +65,7 @@ export const useEnrichedMessages = < const groupStylesFn = groupStyles || getGroupStyles; const messageGroupStyles = useMemo( () => - messagesWithDates.reduce((acc, message, i) => { + messagesWithDates.reduce>((acc, message, i) => { const style = groupStylesFn( message, messagesWithDates[i - 1], @@ -74,7 +74,7 @@ export const useEnrichedMessages = < ); if (style) acc[message.id] = style; return acc; - }, {} as Record), + }, {}), [messagesWithDates, noGroupByUser], ); diff --git a/src/components/Reactions/hooks/useProcessReactions.tsx b/src/components/Reactions/hooks/useProcessReactions.tsx index bc15e2e2d3..d253ebba14 100644 --- a/src/components/Reactions/hooks/useProcessReactions.tsx +++ b/src/components/Reactions/hooks/useProcessReactions.tsx @@ -55,21 +55,21 @@ export const useProcessReactions = < const latestReactionTypes = useMemo( () => - latestReactions.reduce((reactionTypes, { type }) => { + latestReactions.reduce((reactionTypes, { type }) => { if (reactionTypes.indexOf(type) === -1) { reactionTypes.push(type); } return reactionTypes; - }, [] as string[]), + }, []), [latestReactions], ); const supportedReactionMap = useMemo( () => - reactionOptions.reduce((acc, { id }) => { + reactionOptions.reduce>((acc, { id }) => { acc[id] = true; return acc; - }, {} as Record), + }, {}), [reactionOptions], );