Merge pull request #530 from GetStream/reduce-expensive-merge

Reuse expensive merge in theme

Author: nhannah

src/components/MessageList/MessageList.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   ActivityIndicator,
   FlatListProps,
@@ -42,6 +42,7 @@ import {
   useThreadContext,
 } from '../../contexts/threadContext/ThreadContext';
 import {
+  mergeThemes,
   ThemeProvider,
   useTheme,
 } from '../../contexts/themeContext/ThemeContext';
@@ -295,12 +296,17 @@ const MessageListWithContext = <
     TypingIndicatorContainer,
   } = props;
 
+  const { theme } = useTheme();
+
   const {
-    theme: {
-      colors: { accent_blue, white_snow },
-      messageList: { container, listContainer },
-    },
-  } = useTheme();
+    colors: { accent_blue, white_snow },
+    messageList: { container, listContainer },
+  } = theme;
+
+  const modifiedTheme = useMemo(
+    () => mergeThemes({ style: myMessageTheme, theme }),
+    [myMessageTheme, theme],
+  );
 
   const messageList = useMessageList<At, Ch, Co, Ev, Me, Re, Us>({
     inverted,
@@ -507,7 +513,7 @@ const MessageListWithContext = <
       if (wrapMessageInTheme) {
         return (
           <>
-            <ThemeProvider style={myMessageTheme}>
+            <ThemeProvider mergedStyle={modifiedTheme}>
               <Message
                 goToMessage={goToMessage}
                 groupStyles={

src/components/MessageOverlay/MessageOverlay.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   Keyboard,
   Platform,
@@ -43,6 +43,7 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import {
+  mergeThemes,
   ThemeProvider,
   useTheme,
 } from '../../contexts/themeContext/ThemeContext';
@@ -145,24 +146,40 @@ const MessageOverlayWithContext = <
     visible,
   } = props;
 
+  const { theme } = useTheme();
+
   const {
-    theme: {
-      colors: {
-        blue_alice,
-        grey_gainsboro,
-        grey_whisper,
-        transparent,
-        white_smoke,
-      },
-      messageSimple: {
-        content: {
-          container: { borderRadiusL, borderRadiusS },
-          containerInner,
-          replyContainer,
-        },
+    colors: {
+      blue_alice,
+      grey_gainsboro,
+      grey_whisper,
+      transparent,
+      white_smoke,
+    },
+    messageSimple: {
+      content: {
+        container: { borderRadiusL, borderRadiusS },
+        containerInner,
+        replyContainer,
       },
     },
-  } = useTheme();
+  } = theme;
+
+  const myMessageTheme = messagesContext?.myMessageTheme;
+  const [myMessageThemeString, setMyMessageThemeString] = useState(
+    JSON.stringify(myMessageTheme),
+  );
+
+  useEffect(() => {
+    if (myMessageTheme) {
+      setMyMessageThemeString(JSON.stringify(myMessageTheme));
+    }
+  }, [myMessageTheme]);
+
+  const modifiedTheme = useMemo(
+    () => mergeThemes({ style: myMessageTheme, theme }),
+    [myMessageThemeString, theme],
+  );
 
   const scrollViewRef = useRef<ScrollView>(null);
 
@@ -312,20 +329,14 @@ const MessageOverlayWithContext = <
 
   const hasThreadReplies = !!message?.reply_count;
 
-  const {
-    Attachment,
-    FileAttachmentGroup,
-    Gallery,
-    MessageAvatar,
-    myMessageTheme,
-    Reply,
-  } = messagesContext || {};
+  const { Attachment, FileAttachmentGroup, Gallery, MessageAvatar, Reply } =
+    messagesContext || {};
 
   const wrapMessageInTheme = clientId === message?.user?.id && !!myMessageTheme;
 
   return (
     <MessagesProvider<At, Ch, Co, Ev, Me, Re, Us> value={messagesContext}>
-      <ThemeProvider style={wrapMessageInTheme ? myMessageTheme : undefined}>
+      <ThemeProvider mergedStyle={wrapMessageInTheme ? modifiedTheme : theme}>
         <Animated.View
           pointerEvents={visible ? 'auto' : 'none'}
           style={StyleSheet.absoluteFillObject}

src/contexts/themeContext/ThemeContext.tsx

@@ -8,26 +8,40 @@ export type DeepPartial<T> = {
 };
 
 export type ThemeProviderInputValue = {
+  mergedStyle?: Theme;
   style?: DeepPartial<Theme>;
 };
 
+export type MergedThemesParams = {
+  style?: DeepPartial<Theme>;
+  theme?: Theme;
+};
+
+export const mergeThemes = (params: MergedThemesParams) => {
+  const { style, theme } = params;
+  const finalTheme = (!theme || Object.keys(theme).length === 0
+    ? JSON.parse(JSON.stringify(defaultTheme))
+    : JSON.parse(JSON.stringify(theme))) as Theme;
+
+  if (style) {
+    merge(finalTheme, style);
+  }
+
+  return finalTheme;
+};
+
 export const ThemeContext = React.createContext({} as Theme);
 
 export const ThemeProvider: React.FC<ThemeProviderInputValue> = (props) => {
-  const { children, style } = props;
+  const { children, mergedStyle, style } = props;
   const { theme } = useTheme();
   const modifiedTheme = useMemo(() => {
-    const finalTheme =
-      Object.keys(theme).length === 0
-        ? JSON.parse(JSON.stringify(defaultTheme))
-        : JSON.parse(JSON.stringify(theme));
-
-    if (style) {
-      merge(finalTheme, style);
+    if (mergedStyle) {
+      return mergedStyle;
     }
 
-    return finalTheme;
-  }, [theme, style]);
+    return mergeThemes({ style, theme });
+  }, [mergedStyle, style, theme]);
 
   return (
     <ThemeContext.Provider value={modifiedTheme}>