Merge pull request #527 from GetStream/vishal/theme-context-optimization

Optimizing ThemeContext

Author: vishalnarkhede

CHANGELOG.md

@@ -36,7 +36,7 @@ Version 3.x is a major revamp of the SDK and comes with **many breaking changes*
   - Removed css string notation for styles on theme
   - Added displayName to components with bracket notation denoting the theme path e.g. `MessageStatus.displayName = 'MessageStatus{message{status}}';` indicates the theme path would be modified via `const customTheme: DeepPartial<Theme> = { message: { status: { ...customizations } } }`.
 
-Please find detailed docs about this release in our [wiki](https://github.com/GetStream/stream-chat-react-native/wiki#v30-beta)
+Please find detailed docs about this release in our [wiki](https://github.com/GetStream/stream-chat-react-native/wiki#v300)
 
 ## [2.2.2] 2021-02-07
 

README.md

@@ -30,7 +30,7 @@ Currently we are working on publishing v3.0.0. Its in beta phase (`v3.0.0-beta.2
 - [Chat UI Kit](https://getstream.io/chat/ui-kit/)
 - [Release Notes](https://github.com/GetStream/stream-chat-react-native/releases)
 - [Internationalization (i18n)](https://github.com/GetStream/stream-chat-react-native/wiki/Internationalization-(i18n))
-- [Cookbook](https://github.com/GetStream/stream-chat-react-native/wiki#v30-beta) 🚀
+- [Cookbook](https://github.com/GetStream/stream-chat-react-native/wiki#v300) 🚀
 
 ## Contents
 
@@ -50,12 +50,12 @@ Currently we are working on publishing v3.0.0. Its in beta phase (`v3.0.0-beta.2
 
 To use this library you need to ensure you match up with the correct version of React Native you are using.
 
-| `stream-chat-react-native` version | Required React Native Version |
-| ----------------------------------------- | --------- |
-| `3.x.x` (beta)                           | `>= 0.60` |
-| `2.x.x`                                   | `>= 0.60` |
-| `1.x.x`                                   | `>= 0.59` |
-| `0.x.x`                                   | `*` |
+| `stream-chat-react-native` version  | React Native Version  | `stream-chat` Version |
+| ----------------------------------  | --------------------- | --------------------- |
+| `3.x.x` (beta)                      | `>= 0.60`             | `>= 3.0.0`            |
+| `2.x.x`                             | `>= 0.60`             | `< 3.0.0`             |
+| `1.x.x`                             | `>= 0.59`             | `< 3.0.0`             |
+| `0.x.x`                             | `*`                   | `< 3.0.0`             |
 
 ## 📖 React Native Chat Tutorial
 
@@ -94,7 +94,7 @@ Check out our tutorial on how to build a slack clone using react-native and stre
 
 ## 📋 Docs
 
-Please check following url for all the detailed documentation - https://github.com/GetStream/stream-chat-react-native/wiki#v30-beta
+Please check following url for all the detailed documentation - https://github.com/GetStream/stream-chat-react-native/wiki#v300
 
 ## 💬 Keep in mind
 

src/contexts/themeContext/ThemeContext.tsx

@@ -1,6 +1,4 @@
-import React, { useContext } from 'react';
-
-import cloneDeep from 'lodash/cloneDeep';
+import React, { useContext, useMemo } from 'react';
 import merge from 'lodash/merge';
 
 import { defaultTheme, Theme } from './utils/theme';
@@ -18,13 +16,18 @@ export const ThemeContext = React.createContext({} as Theme);
 export const ThemeProvider: React.FC<ThemeProviderInputValue> = (props) => {
   const { children, style } = props;
   const { theme } = useTheme();
-  const modifiedTheme =
-    Object.keys(theme).length === 0
-      ? cloneDeep(defaultTheme)
-      : cloneDeep(theme);
-  if (style) {
-    merge(modifiedTheme, style);
-  }
+  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);
+    }
+
+    return finalTheme;
+  }, [theme, style]);
 
   return (
     <ThemeContext.Provider value={modifiedTheme}>