diff --git a/packages/styled/react/package.json b/packages/styled/react/package.json index c035257c23..af0a95cd02 100644 --- 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 index 77e07a353f..411a8ca6e1 100644 --- 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( inlineStyleMap?: any, ignoreKeys: Set = 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( ); } - const sxHash = stableHash(sx); + // const sxHash = stableHash(sx); const orderedSXResolved = styledResolvedToOrderedSXResolved(sxStyledResolved); @@ -980,6 +994,8 @@ export function verboseStyled( CONFIG ); + sxMemoizationCache[memoizationKey] = orderedSXResolved; + return orderedSXResolved; }