Merge pull request #1623 from gluestack/fix/inject-sx-memoize

fix: memoize inject sx
gluestack · Jan 12, 2024 · 7950b4e · 7950b4e
2 parents 659a535 + 323a2c6
commit 7950b4e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/packages/styled/react/package.json b/packages/styled/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "1.0.37",
+  "version": "1.0.39-alpha.0",
   "keywords": [
     "React Native",
     "Next.js",

diff --git a/packages/styled/react/src/styled.tsx b/packages/styled/react/src/styled.tsx
@@ -50,6 +50,9 @@ import {
 import { updateOrderUnResolvedMap } from './updateOrderUnResolvedMap';
 import { resolveComponentTheme } from './createConfig';
 
+// Create a caching object
+let sxMemoizationCache: any = {};
+
 const styledSystemProps = { ...CSSPropertiesMap };
 
 function isSubset(subset: any, set: any) {
@@ -917,10 +920,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 +972,7 @@ export function verboseStyled<P, Variants, ComCon>(
       );
     }
 
-    const sxHash = stableHash(sx);
+    // const sxHash = stableHash(sx);
 
     const orderedSXResolved =
       styledResolvedToOrderedSXResolved(sxStyledResolved);
@@ -980,6 +994,8 @@ export function verboseStyled<P, Variants, ComCon>(
       CONFIG
     );
 
+    sxMemoizationCache[memoizationKey] = orderedSXResolved;
+
     return orderedSXResolved;
   }