feat: add debounce for web window resize to prevent re-renders

src/createUnistyles.ts

@@ -1,8 +1,8 @@
 import { useContext } from 'react'
-import { useWindowDimensions } from 'react-native'
 import type { CreateStylesFactory, CustomNamedStyles, ScreenSize, ExtractBreakpoints, RemoveKeysWithPrefix } from './types'
 import { UnistylesContext } from './UnistylesTheme'
 import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils'
+import { useDimensions } from './hooks'
 
 export const createUnistyles = <B extends Record<string, number>, T = {}>(breakpoints: B) => {
     const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints) as B
@@ -11,7 +11,7 @@ export const createUnistyles = <B extends Record<string, number>, T = {}>(breakp
         createStyles: <S extends CustomNamedStyles<S, B>>(styles: S | CreateStylesFactory<S, T>) => styles as S,
         useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
             const theme = useContext(UnistylesContext) as T
-            const dimensions = useWindowDimensions()
+            const dimensions = useDimensions()
             const breakpoint = getBreakpointFromScreenWidth<B>(dimensions.width, sortedBreakpoints)
             const screenSize: ScreenSize = {
                 width: dimensions.width,

src/hooks/index.ts

@@ -0,0 +1 @@
+export { useDimensions } from './useDimensions'

src/hooks/useDimensions.ts

@@ -0,0 +1,11 @@
+import { useWindowDimensions } from 'react-native'
+import type { ScreenSize } from '../types'
+
+export const useDimensions = (): ScreenSize => {
+    const { width, height } = useWindowDimensions()
+
+    return {
+        width,
+        height
+    }
+}

src/hooks/useDimensions.web.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef, useState } from 'react'
+import type { ScreenSize } from '../types'
+
+export const useDimensions = (): ScreenSize => {
+    const timerRef = useRef<number>()
+    const [screenSize, setScreenSize] = useState<ScreenSize>({
+        width: window.innerWidth,
+        height: window.innerHeight
+    })
+
+    useEffect(() => {
+        const handleResize = () => {
+            clearTimeout(timerRef.current)
+
+            timerRef.current = setTimeout(() => setScreenSize({
+                width: window.innerWidth,
+                height: window.innerHeight
+            }), 100)
+        }
+
+        window.addEventListener('resize', handleResize)
+
+        return () => {
+            window.removeEventListener('resize', handleResize)
+            clearTimeout(timerRef.current)
+        }
+    }, [])
+
+    return screenSize
+}

tsconfig.json

@@ -9,7 +9,10 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
-    "lib": ["esnext"],
+    "lib": [
+      "esnext",
+      "dom"
+    ],
     "module": "esnext",
     "moduleResolution": "node",
     "noFallthroughCasesInSwitch": true,

yarn.lock

@@ -3790,7 +3790,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*":
+"@types/node@npm:*, @types/node@npm:^20.8.2":
   version: 20.8.2
   resolution: "@types/node@npm:20.8.2"
   checksum: 3da73e25d821bfcdb7de98589027e08bb4848e55408671c4a83ec0341e124b5313a0b20e1e4b4eff1168ea17a86f622ad73fcb04b761abd77496b9a27cbd5de5
@@ -15171,6 +15171,7 @@ __metadata:
   dependencies:
     "@babel/core": 7.23.0
     "@expo/webpack-config": 19.0.0
+    "@types/node": ^20.8.2
     babel-loader: 9.1.3
     babel-plugin-module-resolver: 5.0.0
     expo: 49.0.13