Mitigate chat re-rerenders in callwithchat composite (#4301)

Azure · Mar 19, 2024 · aa041b6 · aa041b6
1 parent 57200e8
commit aa041b6
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/change-beta/@azure-communication-react-bbcff981-b3c8-4443-8fe1-d10b89221703.json b/change-beta/@azure-communication-react-bbcff981-b3c8-4443-8fe1-d10b89221703.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Ensure theme is memoized for calls to useTheme",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-bbcff981-b3c8-4443-8fe1-d10b89221703.json b/change/@azure-communication-react-bbcff981-b3c8-4443-8fe1-d10b89221703.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Ensure theme is memoized for calls to useTheme",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/src/theming/FluentThemeProvider.tsx b/packages/react-components/src/theming/FluentThemeProvider.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 import { ThemeProvider, PartialTheme, Theme, getTheme, mergeThemes, mergeStyles } from '@fluentui/react';
 import { lightTheme } from './themes';
 
@@ -63,8 +63,10 @@ const ThemeContext = createContext<Theme>(defaultTheme);
 export const FluentThemeProvider = (props: FluentThemeProviderProps): JSX.Element => {
   const { fluentTheme, rtl, children, /* @conditional-compile-remove(image-overlay) */ rootStyle } = props;
 
-  let fluentV8Theme: Theme = mergeThemes(defaultTheme, fluentTheme);
-  fluentV8Theme = mergeThemes(fluentV8Theme, { rtl });
+  const fluentV8Theme = useMemo(() => {
+    const mergedTheme = mergeThemes(defaultTheme, fluentTheme);
+    return mergeThemes(mergedTheme, { rtl });
+  }, [fluentTheme, rtl]);
 
   return (
     <ThemeContext.Provider value={fluentV8Theme}>