From cf7ed970c369ed2b1cf22b15b5a1c6bee263c6ec Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Wed, 18 May 2022 13:55:50 +0900
Subject: [PATCH 1/2] Fix typo: Separator

---
 src/index.d.ts                                     |  6 +++---
 .../Channel/components/ChannelUI/index.tsx         |  6 +++---
 .../Channel/components/Message/index.tsx           | 14 ++++++++++----
 .../Channel/components/MessageList/index.tsx       |  6 +++---
 src/smart-components/Channel/index.tsx             |  2 +-
 5 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index a1b9d49d0..90f7226bb 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -609,7 +609,7 @@ interface ChannelUIProps {
   renderMessage?: (props: RenderMessageProps) => React.ComponentType;
   renderMessageInput?: () => React.ReactNode;
   renderTypingIndicator?: () => React.ReactNode;
-  renderCustomSeperator?: () => React.ReactNode;
+  renderCustomSeparator?: () => React.ReactNode;
 }
 
 type CoreMessageType = Sendbird.AdminMessage | Sendbird.UserMessage | Sendbird.FileMessage;
@@ -659,7 +659,7 @@ type MessageUIProps = {
   handleScroll: () => void;
   // for extending
   renderMessage?: (props: RenderMessageProps) => React.ReactNode;
-  renderCustomSeperator?: () => React.ReactNode;
+  renderCustomSeparator?: () => React.ReactNode;
   renderEditInput?: () => React.ReactNode;
   renderMessageContent?: () => React.ReactNode;
 };
@@ -667,7 +667,7 @@ type MessageUIProps = {
 type MessageListProps = {
   renderMessage?: (props: RenderMessageProps) => React.ReactNode;
   renderPlaceholderEmpty?: () => React.ReactNode;
-  renderCustomSeperator?: () => React.ReactNode;
+  renderCustomSeparator?: () => React.ReactNode;
 };
 
 type SuggestedMentionListProps = {
diff --git a/src/smart-components/Channel/components/ChannelUI/index.tsx b/src/smart-components/Channel/components/ChannelUI/index.tsx
index 93dd91963..e7641fe13 100644
--- a/src/smart-components/Channel/components/ChannelUI/index.tsx
+++ b/src/smart-components/Channel/components/ChannelUI/index.tsx
@@ -23,7 +23,7 @@ export interface ChannelUIProps {
   renderMessage?: (props: RenderMessageProps) => React.ReactNode;
   renderMessageInput?: () => React.ReactNode;
   renderTypingIndicator?: () => React.ReactNode;
-  renderCustomSeperator?: () => React.ReactNode;
+  renderCustomSeparator?: () => React.ReactNode;
 }
 
 const ChannelUI: React.FC<ChannelUIProps> = ({
@@ -34,7 +34,7 @@ const ChannelUI: React.FC<ChannelUIProps> = ({
   renderMessage,
   renderMessageInput,
   renderTypingIndicator,
-  renderCustomSeperator,
+  renderCustomSeparator,
 }: ChannelUIProps) => {
   const {
     currentGroupChannel,
@@ -143,7 +143,7 @@ const ChannelUI: React.FC<ChannelUIProps> = ({
             <MessageList
               renderMessage={renderMessage}
               renderPlaceholderEmpty={renderPlaceholderEmpty}
-              renderCustomSeperator={renderCustomSeperator}
+              renderCustomSeparator={renderCustomSeparator}
             />
           )
       }
diff --git a/src/smart-components/Channel/components/Message/index.tsx b/src/smart-components/Channel/components/Message/index.tsx
index ad2a74674..48af11c4c 100644
--- a/src/smart-components/Channel/components/Message/index.tsx
+++ b/src/smart-components/Channel/components/Message/index.tsx
@@ -32,7 +32,7 @@ type MessageUIProps = {
   handleScroll: () => void;
   // for extending
   renderMessage?: (props: RenderMessageProps) => React.ReactNode;
-  renderCustomSeperator?: () => React.ReactNode;
+  renderCustomSeparator?: () => React.ReactNode;
   renderEditInput?: () => React.ReactNode;
   renderMessageContent?: () => React.ReactNode;
 };
@@ -44,7 +44,7 @@ const Message: React.FC<MessageUIProps> = (props: MessageUIProps) => {
     chainTop,
     chainBottom,
     handleScroll,
-    renderCustomSeperator,
+    renderCustomSeparator,
     renderEditInput,
     renderMessage,
     renderMessageContent,
@@ -160,6 +160,12 @@ const Message: React.FC<MessageUIProps> = (props: MessageUIProps) => {
       chainBottom,
     });
   }, [message, renderMessage]);
+  const renderedCustomSeparator = useMemo(() => {
+    if (renderCustomSeparator) {
+      return renderCustomSeparator?.();
+    }
+    return null;
+  }, [message, renderCustomSeparator]);
 
   if (renderedMessage) {
     return (
@@ -174,7 +180,7 @@ const Message: React.FC<MessageUIProps> = (props: MessageUIProps) => {
         {/* date-separator */}
         {
           // TODO: Add message instance as a function parameter
-          hasSeparator && renderCustomSeperator?.() || (
+          hasSeparator && renderedCustomSeparator || (
             <DateSeparator>
               <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>
                 {format(message.createdAt, 'MMMM dd, yyyy', {
@@ -273,7 +279,7 @@ const Message: React.FC<MessageUIProps> = (props: MessageUIProps) => {
     >
       {/* date-separator */}
       {
-        hasSeparator && (renderCustomSeperator?.() || (
+        hasSeparator && (renderCustomSeparator?.() || (
           <DateSeparator>
             <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>
               {format(message.createdAt, 'MMMM dd, yyyy', {
diff --git a/src/smart-components/Channel/components/MessageList/index.tsx b/src/smart-components/Channel/components/MessageList/index.tsx
index b9a93bf82..b10c9e68b 100644
--- a/src/smart-components/Channel/components/MessageList/index.tsx
+++ b/src/smart-components/Channel/components/MessageList/index.tsx
@@ -15,7 +15,7 @@ import uuidv4 from '../../../../utils/uuid';
 export type MessageListProps = {
   renderMessage?: (props: RenderMessageProps) => React.ReactNode;
   renderPlaceholderEmpty?: () => React.ReactNode;
-  renderCustomSeperator?: () => React.ReactNode;
+  renderCustomSeparator?: () => React.ReactNode;
 };
 
 const SCROLL_REF_CLASS_NAME = '.sendbird-msg--scroll-ref';
@@ -24,7 +24,7 @@ const MessageList: React.FC<MessageListProps> = (props: MessageListProps) => {
   const {
     renderMessage,
     renderPlaceholderEmpty,
-    renderCustomSeperator,
+    renderCustomSeparator,
   } = props;
   const {
     allMessages,
@@ -143,7 +143,7 @@ const MessageList: React.FC<MessageListProps> = (props: MessageListProps) => {
             hasSeparator={hasSeparator}
             chainTop={chainTop}
             chainBottom={chainBottom}
-            renderCustomSeperator={renderCustomSeperator}
+            renderCustomSeparator={renderCustomSeparator}
             key={m.messageId + uuidv4()}
           />
         );
diff --git a/src/smart-components/Channel/index.tsx b/src/smart-components/Channel/index.tsx
index bc68379c2..430843768 100644
--- a/src/smart-components/Channel/index.tsx
+++ b/src/smart-components/Channel/index.tsx
@@ -36,7 +36,7 @@ const Channel: React.FC<ChannelProps> = (props: ChannelProps) => {
         renderMessage={props?.renderMessage}
         renderMessageInput={props?.renderMessageInput}
         renderTypingIndicator={props?.renderTypingIndicator}
-        renderCustomSeperator={props?.renderCustomSeperator}
+        renderCustomSeparator={props?.renderCustomSeparator}
       />
     </ChannelProvider>
   );

From 6dc510df8b3101410755a4e41dd9d580a77cd86b Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Wed, 18 May 2022 13:59:11 +0900
Subject: [PATCH 2/2] Use memorization for renderCustomSeparator and contain it
 with round brackets

---
 src/smart-components/Channel/components/Message/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/smart-components/Channel/components/Message/index.tsx b/src/smart-components/Channel/components/Message/index.tsx
index 48af11c4c..eb0229748 100644
--- a/src/smart-components/Channel/components/Message/index.tsx
+++ b/src/smart-components/Channel/components/Message/index.tsx
@@ -180,7 +180,7 @@ const Message: React.FC<MessageUIProps> = (props: MessageUIProps) => {
         {/* date-separator */}
         {
           // TODO: Add message instance as a function parameter
-          hasSeparator && renderedCustomSeparator || (
+          hasSeparator && (renderedCustomSeparator || (
             <DateSeparator>
               <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>
                 {format(message.createdAt, 'MMMM dd, yyyy', {
@@ -188,7 +188,7 @@ const Message: React.FC<MessageUIProps> = (props: MessageUIProps) => {
                 })}
               </Label>
             </DateSeparator>
-          )
+          ))
         }
         {renderedMessage}
       </div>
@@ -279,7 +279,7 @@ const Message: React.FC<MessageUIProps> = (props: MessageUIProps) => {
     >
       {/* date-separator */}
       {
-        hasSeparator && (renderCustomSeparator?.() || (
+        hasSeparator && (renderedCustomSeparator || (
           <DateSeparator>
             <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>
               {format(message.createdAt, 'MMMM dd, yyyy', {