From 8bb7ea114985abfa176dff1bb75040b54b057a8a Mon Sep 17 00:00:00 2001
From: nightohl <haneojin@gmail.com>
Date: Thu, 13 Feb 2025 02:24:15 +0900
Subject: [PATCH] fix(collection): collection hydration error

- change useWindowSize hook to ensure for ssr result to match when hydration.
- fixed hydration errors caused by windowWith and padding
---
 .../src/third-party/collection.tsx            | 14 ++++++-----
 .../src/third-party/react-use.ts              | 24 +++++++++----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/react-notion-x/src/third-party/collection.tsx b/packages/react-notion-x/src/third-party/collection.tsx
index 5e8242e1f..b67787650 100644
--- a/packages/react-notion-x/src/third-party/collection.tsx
+++ b/packages/react-notion-x/src/third-party/collection.tsx
@@ -115,10 +115,7 @@ function CollectionViewBlock({
     [collectionState, setCollectionState]
   )
 
-  let { width: windowWidth } = useWindowSize()
-  if (isServer) {
-    windowWidth = 1024
-  }
+  const { width: windowWidth } = useWindowSize()
 
   const collection = recordMap.collection[collectionId]?.value
   const collectionView = recordMap.collection_view[collectionViewId]?.value
@@ -152,7 +149,7 @@ function CollectionViewBlock({
     }
 
     const padding =
-      isServer && !isMounted ? 96 : Math.trunc((width - notionBodyWidth) / 2)
+      isServer || !isMounted ? 96 : Math.trunc((width - notionBodyWidth) / 2)
     style.paddingLeft = padding
     style.paddingRight = padding
 
@@ -161,7 +158,12 @@ function CollectionViewBlock({
       width,
       padding
     }
-  }, [windowWidth, parentPage, collectionView?.type, isMounted])
+  }, [
+    collectionView?.type,
+    windowWidth,
+    parentPage?.format?.page_full_width,
+    isMounted
+  ])
 
   // console.log({
   //   width,
diff --git a/packages/react-notion-x/src/third-party/react-use.ts b/packages/react-notion-x/src/third-party/react-use.ts
index 6c2581ce2..3646ac3f1 100644
--- a/packages/react-notion-x/src/third-party/react-use.ts
+++ b/packages/react-notion-x/src/third-party/react-use.ts
@@ -40,34 +40,32 @@ function off<T extends Window | Document | HTMLElement | EventTarget>(
 
 const isBrowser = typeof window !== 'undefined'
 
-export const useWindowSize = (
-  initialWidth = Infinity,
-  initialHeight = Infinity
-) => {
-  const [state, setState] = useRafState<{ width: number; height: number }>({
-    width: isBrowser ? window.innerWidth : initialWidth,
-    height: isBrowser ? window.innerHeight : initialHeight
+export const useWindowSize = (initialWidth = 1024, initialHeight = 768) => {
+  const [dimensions, setDimensions] = useRafState<{
+    width: number
+    height: number
+  }>({
+    width: initialWidth,
+    height: initialHeight
   })
 
   useEffect((): (() => void) | void => {
     if (isBrowser) {
       const handler = () => {
-        setState({
+        setDimensions({
           width: window.innerWidth,
           height: window.innerHeight
         })
       }
 
       on(window, 'resize', handler)
-
-      return () => {
-        off(window, 'resize', handler)
-      }
+      handler()
+      return () => off(window, 'resize', handler)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  return state
+  return dimensions
 }
 
 export const useEffectOnce = (effect: EffectCallback) => {