fix: memoize inject sx

packages/styled/react/src/styled.tsx

@@ -50,6 +50,12 @@ import {
 import { updateOrderUnResolvedMap } from './updateOrderUnResolvedMap';
 import { resolveComponentTheme } from './createConfig';
 
+// Create a caching object
+let sxMemoizationCache: any = {};
+
+// Define a function to generate a unique key for the function arguments
+const generateCacheKey = (args: any) => stableHash(args);
+
 const styledSystemProps = { ...CSSPropertiesMap };
 
 function isSubset(subset: any, set: any) {
@@ -917,10 +923,21 @@ export function verboseStyled<P, Variants, ComCon>(
     inlineStyleMap?: any,
     ignoreKeys: Set<any> = new Set()
   ) {
+    const sxHash = stableHash(sx);
+
+    const memoizationKey = sxHash + type;
+    // Check if the result is already in the cache
+    if (sxMemoizationCache[memoizationKey]) {
+      return sxMemoizationCache[memoizationKey];
+    }
+
     const inlineSxTheme = {
       baseStyle: sx,
     };
 
+    // if (Platform.OS === '')
+    // console.log(sxHash, GluestackStyleSheet.getStyleMap(), 'hash here');
+
     resolvePlatformTheme(inlineSxTheme, Platform.OS);
     const sxStyledResolved = styledToStyledResolved(
       // @ts-ignore
@@ -958,7 +975,7 @@ export function verboseStyled<P, Variants, ComCon>(
       );
     }
 
-    const sxHash = stableHash(sx);
+    // const sxHash = stableHash(sx);
 
     const orderedSXResolved =
       styledResolvedToOrderedSXResolved(sxStyledResolved);
@@ -980,6 +997,8 @@ export function verboseStyled<P, Variants, ComCon>(
       CONFIG
     );
 
+    sxMemoizationCache[memoizationKey] = orderedSXResolved;
+
     return orderedSXResolved;
   }