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 (
+
+
+
+
+
+ )
+}
+
+const Memoized = React.memo<{text: string; style: StyleProp}>(({ text, style }) =>
+ {text} ({useRenderCount()})
+)
+
+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..ddc1166f 100644
--- a/src/createUnistyles.ts
+++ b/src/createUnistyles.ts
@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useMemo, useEffect, useRef } from 'react'
import { StyleSheet } from 'react-native'
import type {
Breakpoints,
@@ -36,12 +36,13 @@ export const createUnistyles = (breakpoints: B) =
}
}
- const parsedStyles = typeof stylesheet === 'function'
+ const parsedStyles = useMemo(() => typeof stylesheet === 'function'
? stylesheet(theme)
- : stylesheet
+ : stylesheet, [theme, stylesheet])
+
const breakpoint = getBreakpointFromScreenWidth(screenSize.width, sortedBreakpointEntries)
- const dynamicStyleSheet = Object
+ const dynamicStyleSheet = useMemo(() => Object
.entries(parsedStyles)
.reduce((acc, [key, value]) => {
const style = value as CustomNamedStyles
@@ -57,7 +58,7 @@ export const createUnistyles = (breakpoints: B) =
...acc,
[key]: parseStyle(style, breakpoint, screenSize, sortedBreakpointEntries)
})
- }, {} as ST)
+ }, {} as ST), [breakpoint, screenSize, sortedBreakpointEntries])
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()