feat: makes cache opt-in

README.md

@@ -22,7 +22,7 @@ of the `styled-system` package commonly used on the web.
 
 ## Highlights
 
-- ⚡️ All styles are cached. So it doesn't cause any rerender if result is consistent.
+- ⚡️ All styles are allowed to be cached. So it doesn't cause any rerender if result is consistent.
 - ⭐️ Allows arguments such as `m, px, py, bg, flex, flexDirection, position` to be passed directly to Props according to the grammar of `styled-system`.
 - 🎨 Users can define the design system by directly defining and delivering themes.
 - ❤️ TypeScript can be fully used through the Type Generation process using CLI.

doc/docs/intro.mdx

@@ -8,6 +8,15 @@ title: Getting Started
 `React Native Styled System` is a React Native implementation
 of the `styled-system` package commonly used on the web.
 
+## Highlights
+
+- ⚡️ All styles are allowed to be cached. So it doesn't cause any rerender if result is consistent.
+- ⭐️ Allows arguments such as `m, px, py, bg, flex, flexDirection, position` to be passed directly to Props according to the grammar of `styled-system`.
+- 🎨 Users can define the design system by directly defining and delivering themes.
+- ❤️ TypeScript can be fully used through the Type Generation process using CLI.
+- 🚀 Logical or responsive values such as `safeAreaTop` and `sidePadding` can be injected into the theme and used as token values.
+- 💬 Text Typography
+- 🎉 Integrate Dark Theme easily.
 
 ## Why we need styled-system
 
@@ -61,14 +70,3 @@ It does not fully support the grammar of `styled-system` and there are some gram
 
 Styles such as `justifySelf` that are not yet supported in React Native obviously cannot be added in the future.
 :::
-
-
-## Highlights
-
-- ⚡️ All styles are cached. So it doesn't cause any rerender if result is consistent.
-- ⭐️ Allows arguments such as `m, px, py, bg, flex, flexDirection, position` to be passed directly to Props according to the grammar of `styled-system`.
-- 🎨 Users can define the design system by directly defining and delivering themes.
-- ❤️ TypeScript can be fully used through the Type Generation process using CLI.
-- 🚀 Logical or responsive values such as `safeAreaTop` and `sidePadding` can be injected into the theme and used as token values.
-- 💬 Text Typography
-- 🎉 Integrate Dark Theme easily.

packages/core/src/hook/useSx.test.ts

@@ -20,19 +20,21 @@ function expectResult(
     styleType,
     transform,
     fallback,
+    cache,
   }: {
     expectation: object;
     filteredPropsExpectation?: object;
     styleType?: ThemedStyleType;
     transform?: StyleTransform;
     fallback?: StyleFallback;
+    cache?: boolean;
   },
 ) {
   const {
     result: {
       current: { getStyle, filteredProps },
     },
-  } = renderHook(() => useSx(props, { theme, styleType, transform, fallback }));
+  } = renderHook(() => useSx(props, { theme, styleType, transform, fallback, cache }));
 
   if (expectation) {
     expect(StyleSheet.flatten(getStyle())).toEqual(expectation);
@@ -362,6 +364,7 @@ describe('cache', () => {
       emptyTheme,
       { bg: 'red', mt: 2 },
       {
+        cache: true,
         expectation: { marginTop: 2, backgroundColor: 'red' },
       },
     );
@@ -370,6 +373,7 @@ describe('cache', () => {
       emptyTheme,
       { mt: 2, sx: { bg: 'red' } },
       {
+        cache: true,
         expectation: { marginTop: 2, backgroundColor: 'red' },
       },
     );

packages/core/src/hook/useSx.ts

@@ -23,6 +23,7 @@ export type UseSxOptions = {
   styleType?: ThemedStyleType;
   transform?: StyleTransform;
   fallback?: StyleFallback;
+  cache?: boolean;
 };
 const defaultUseSxOptions: UseSxOptions = { styleType: 'ViewStyle' };
 export const useSx = <S extends ViewStyle = ViewStyle, P extends Props = Props>(
@@ -32,6 +33,7 @@ export const useSx = <S extends ViewStyle = ViewStyle, P extends Props = Props>(
     styleType = defaultUseSxOptions.styleType,
     transform = defaultUseSxOptions.transform,
     fallback,
+    cache,
   }: UseSxOptions = defaultUseSxOptions,
 ) => {
   const styledSystemContext = useContext(StyledSystemContext);
@@ -76,14 +78,22 @@ export const useSx = <S extends ViewStyle = ViewStyle, P extends Props = Props>(
     if (is.function(transform)) {
       const transformedSx = transform(StyleSheet.flatten(composedStyle));
 
-      return getCachedStyle(
-        StyleSheet.compose(
-          composedStyle,
-          propsToThemedStyle({ theme, sx: transformedSx, styleType }) as S,
-        ),
+      const ret = StyleSheet.compose(
+        composedStyle,
+        propsToThemedStyle({ theme, sx: transformedSx, styleType }),
       );
+
+      if (cache) {
+        return getCachedStyle(ret);
+      } else {
+        return ret as StyleProp<S>;
+      }
     } else {
-      return getCachedStyle(composedStyle);
+      if (cache) {
+        return getCachedStyle(composedStyle);
+      } else {
+        return composedStyle as StyleProp<S>;
+      }
     }
   });
 

packages/core/src/hook/useSxStyle.ts

@@ -10,10 +10,11 @@ import { propsToThemedStyle } from '../util/propsToThemedStyle';
 
 export type UseSxStyleOptions = {
   theme?: ThemedDict;
+  cache?: boolean;
 };
 const defaultOptions: UseSxStyleOptions = {};
 
-export const useSxStyle = ({ theme: optionTheme }: UseSxStyleOptions = defaultOptions) => {
+export const useSxStyle = ({ theme: optionTheme, cache }: UseSxStyleOptions = defaultOptions) => {
   const styledSystemContext = useContext(StyledSystemContext);
 
   return (sx: TextSxProps): StyleProp<TextStyle> => {
@@ -25,11 +26,18 @@ export const useSxStyle = ({ theme: optionTheme }: UseSxStyleOptions = defaultOp
       return {};
     }
 
-    return getCachedStyle(
-      propsToThemedStyle({
+    if (cache) {
+      return getCachedStyle(
+        propsToThemedStyle({
+          theme,
+          sx,
+        }),
+      );
+    } else {
+      return propsToThemedStyle({
         theme,
         sx,
-      }),
-    );
+      });
+    }
   };
 };