Optimizing ThemeContext

Author: vishalnarkhede

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,10 +16,14 @@ 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);
+  const modifiedTheme = useMemo(
+    () =>
+      Object.keys(theme).length === 0
+        ? JSON.parse(JSON.stringify(defaultTheme))
+        : JSON.parse(JSON.stringify(theme)),
+    [theme],
+  );
+
   if (style) {
     merge(modifiedTheme, style);
   }