fix: hydration ssr

Author: jpudysz

src/UnistylesTheme.tsx

@@ -1,6 +1,5 @@
-import React, { createContext, useEffect, useState } from 'react'
+import React, { createContext } from 'react'
 import type { PropsWithChildren } from 'react'
-import { isServer } from './utils'
 
 interface UnistylesThemeProps extends PropsWithChildren {
     theme: any
@@ -11,16 +10,8 @@ export const UnistylesContext = createContext({})
 export const UnistylesTheme: React.FunctionComponent<UnistylesThemeProps> = ({
     theme,
     children
-}) => {
-    const [isClient, setIsClient] = useState(!isServer)
-
-    useEffect(() => {
-        setIsClient(true)
-    }, [])
-
-    return (
-        <UnistylesContext.Provider value={theme}>
-            {isClient ? children : <React.Fragment /> }
-        </UnistylesContext.Provider>
-    )
-}
+}) => (
+    <UnistylesContext.Provider value={theme}>
+        {children}
+    </UnistylesContext.Provider>
+)

src/hooks/useDimensions.web.ts

@@ -1,12 +1,16 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { ScreenSize } from '../types'
 
 export const useDimensions = (): ScreenSize => {
     const timerRef = useRef<ReturnType<typeof setTimeout>>()
-    const [screenSize, setScreenSize] = useState<ScreenSize>({
-        width: window.innerWidth,
-        height: window.innerHeight
-    })
+    const [screenSize, setScreenSize] = useState<ScreenSize>({} as ScreenSize)
+
+    useLayoutEffect(() => {
+        setScreenSize({
+            width: window.innerWidth,
+            height: window.innerHeight
+        })
+    }, [])
 
     useEffect(() => {
         const handleResize = () => {