From d127771b158cfce8c1e825c4b434f147aeca05a3 Mon Sep 17 00:00:00 2001
From: Levi Buzolic <levibuzolic@gmail.com>
Date: Wed, 11 Oct 2023 23:52:21 +1100
Subject: [PATCH] RFC: Memoize style objects to prevent re-renders of memoized
 components

---
 example/src/App.tsx                  |  7 +---
 example/src/examples/Memoization.tsx | 54 ++++++++++++++++++++++++++++
 example/src/examples/index.ts        |  1 +
 src/createUnistyles.ts               | 11 +++---
 src/hooks/useDimensions.ts           |  9 +----
 5 files changed, 63 insertions(+), 19 deletions(-)
 create mode 100644 example/src/examples/Memoization.tsx

diff --git a/example/src/App.tsx b/example/src/App.tsx
index e0f56d14..a763aee4 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -16,12 +16,7 @@ export const App: React.FunctionComponent = () => {
 
     return (
         <UnistylesTheme theme={appTheme}>
-            <Examples.Extreme
-                onToggleTheme={() => setTheme(prevState => prevState === Theme.Light
-                    ? Theme.Dark
-                    : Theme.Light
-                )}
-            />
+            <Examples.Memoization />
         </UnistylesTheme>
     )
 }
diff --git a/example/src/examples/Memoization.tsx b/example/src/examples/Memoization.tsx
new file mode 100644
index 00000000..5778da33
--- /dev/null
+++ b/example/src/examples/Memoization.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { Text, View, type StyleProp, type TextStyle, Button } from 'react-native'
+import { createStyleSheet, useStyles } from '../styles'
+
+export const Memoization: React.FunctionComponent = () => {
+    const { styles } = useStyles(stylesheet)
+    const [ count, setCount ] = React.useState(0)
+
+    return (
+        <View style={styles.container}>
+            <Memoized text="With breakpoints" style={styles.withBreakpoints} />
+            <Memoized text="No breakpoints" style={styles.noBreakpoints} />
+            <Memoized text="Static" style={staticStyles.static} />
+            <Button title={`Re-render (${count})`} onPress={() => setCount(count => count + 1)} />
+        </View>
+    )
+}
+
+const Memoized = React.memo<{text: string; style: StyleProp<TextStyle>}>(({ text, style }) =>
+    <Text style={style}>{text} ({useRenderCount()})</Text>
+)
+
+const useRenderCount = () => {
+    const count = React.useRef(0)
+    count.current++
+
+    return count.current
+}
+
+const stylesheet = createStyleSheet({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignContent: 'space-between',
+        resizeMode: 'contain'
+    },
+    withBreakpoints: {
+        fontSize: 18,
+        color: {
+            xs: 'red',
+            md: 'blue'
+        }
+    },
+    noBreakpoints: {
+        fontSize: 18
+    }
+})
+
+const staticStyles = createStyleSheet({
+    static: {
+        fontSize: 18
+    }
+})
diff --git a/example/src/examples/index.ts b/example/src/examples/index.ts
index 858a265d..fea3d465 100644
--- a/example/src/examples/index.ts
+++ b/example/src/examples/index.ts
@@ -4,3 +4,4 @@ export { Theme } from './Theme'
 export { Breakpoints } from './Breakpoints'
 export { MediaQueries } from './MediaQueries'
 export { Extreme } from './Extreme'
+export { Memoization } from './Memoization'
diff --git a/src/createUnistyles.ts b/src/createUnistyles.ts
index 88285817..0ac9be68 100644
--- a/src/createUnistyles.ts
+++ b/src/createUnistyles.ts
@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useMemo } from 'react'
 import { StyleSheet } from 'react-native'
 import type {
     Breakpoints,
@@ -36,12 +36,13 @@ export const createUnistyles = <B extends Breakpoints, T = {}>(breakpoints: B) =
                 }
             }
 
-            const parsedStyles = typeof stylesheet === 'function'
+            const parsedStyles = useMemo(() => typeof stylesheet === 'function'
                 ? stylesheet(theme)
-                : stylesheet
+                : stylesheet, [theme, stylesheet])
+
             const breakpoint = getBreakpointFromScreenWidth<B>(screenSize.width, sortedBreakpointEntries)
 
-            const dynamicStyleSheet = Object
+            const dynamicStyleSheet = useMemo(() => Object
                 .entries(parsedStyles)
                 .reduce((acc, [key, value]) => {
                     const style = value as CustomNamedStyles<ST, B>
@@ -57,7 +58,7 @@ export const createUnistyles = <B extends Breakpoints, T = {}>(breakpoints: B) =
                         ...acc,
                         [key]: parseStyle<ST, B>(style, breakpoint, screenSize, sortedBreakpointEntries)
                     })
-                }, {} as ST)
+                }, {} as ST), [breakpoint, screenSize, parsedStyles])
 
             return {
                 theme,
diff --git a/src/hooks/useDimensions.ts b/src/hooks/useDimensions.ts
index a0df43af..15b3a610 100644
--- a/src/hooks/useDimensions.ts
+++ b/src/hooks/useDimensions.ts
@@ -1,11 +1,4 @@
 import { useWindowDimensions } from 'react-native'
 import type { ScreenSize } from '../types'
 
-export const useDimensions = (): ScreenSize => {
-    const { width, height } = useWindowDimensions()
-
-    return {
-        width,
-        height
-    }
-}
+export const useDimensions = (): ScreenSize => useWindowDimensions()