diff --git a/packages/styled/react/src/styled.tsx b/packages/styled/react/src/styled.tsx index 77e07a353f..689b82019c 100644 --- a/packages/styled/react/src/styled.tsx +++ b/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( 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 +975,7 @@ export function verboseStyled( ); } - const sxHash = stableHash(sx); + // const sxHash = stableHash(sx); const orderedSXResolved = styledResolvedToOrderedSXResolved(sxStyledResolved); @@ -980,6 +997,8 @@ export function verboseStyled( CONFIG ); + sxMemoizationCache[memoizationKey] = orderedSXResolved; + return orderedSXResolved; }