Merge pull request #27 from levibuzolic/memoize-styles

RFC: Memoize style objects to prevent re-renders of memoized components

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>
     )
 }

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
+    }
+})

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'

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,

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()