From 9af7ecd5b6e06e4301c6b32c5cce7c807523b7b5 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Wed, 18 Sep 2024 09:59:30 +0200 Subject: [PATCH 1/3] fix: properly resolve sendMessage during memoization --- .../Channel/hooks/useCreateInputMessageInputContext.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts b/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts index ff97c9e7d4..4478e7df69 100644 --- a/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts +++ b/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts @@ -134,7 +134,15 @@ export const useCreateInputMessageInputContext = < UploadProgressIndicator, }), // eslint-disable-next-line react-hooks/exhaustive-deps - [compressImageQuality, channelId, editingDep, initialValue, maxMessageLength, quotedMessageId], + [ + compressImageQuality, + channelId, + editingDep, + initialValue, + maxMessageLength, + quotedMessageId, + sendMessage, + ], ); return inputMessageInputContext; From a7053feb79da794040a12f0e6b83c5fcbfb13dc0 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Wed, 18 Sep 2024 13:43:11 +0200 Subject: [PATCH 2/3] fix: remedy change so that it does not cause performance issues --- package/src/components/Channel/Channel.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx index 46ea57c257..d9be2d68c9 100644 --- a/package/src/components/Channel/Channel.tsx +++ b/package/src/components/Channel/Channel.tsx @@ -2219,6 +2219,17 @@ const ChannelWithContext = < watchers, }); + // This is mainly a hack to get around an issue with sendMessage not being passed correctly as a + // useMemo() dependency. The easy fix is to add it to the dependency array, however that would mean + // that this (very used) context is essentially going to cause rerenders on pretty much every Channel + // render, since sendMessage is an inline function. Wrapping it in useCallback() is one way to fix it + // but it is definitely not trivial, especially considering it depends on other inline functions that + // are not wrapped in a useCallback() themselves hence creating a huge cascading change. Can be removed + // once our memoization issues are fixed in most places in the app or we move to a reactive state store. + const sendMessageRef = + useRef['sendMessage']>(sendMessage); + sendMessageRef.current = sendMessage; + const inputMessageInputContext = useCreateInputMessageInputContext({ additionalTextInputProps, asyncMessagesLockDistance, @@ -2269,7 +2280,7 @@ const ChannelWithContext = < quotedMessage, SendButton, sendImageAsync, - sendMessage, + sendMessage: (...args) => sendMessageRef.current(...args), SendMessageDisallowedIndicator, setInputRef, setQuotedMessageState, From 48bd9d6010df7e7f0c69de23d234462c62a402da Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Wed, 18 Sep 2024 13:44:15 +0200 Subject: [PATCH 3/3] chore: revert sendMessage in the dep array --- .../Channel/hooks/useCreateInputMessageInputContext.ts | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts b/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts index 4478e7df69..ff97c9e7d4 100644 --- a/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts +++ b/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts @@ -134,15 +134,7 @@ export const useCreateInputMessageInputContext = < UploadProgressIndicator, }), // eslint-disable-next-line react-hooks/exhaustive-deps - [ - compressImageQuality, - channelId, - editingDep, - initialValue, - maxMessageLength, - quotedMessageId, - sendMessage, - ], + [compressImageQuality, channelId, editingDep, initialValue, maxMessageLength, quotedMessageId], ); return inputMessageInputContext;