fix: Hydration mismatch on table collection

Author: alaycock

packages/react-notion-x/src/styles.css

@@ -1294,7 +1294,6 @@ svg.notion-page-icon {
   float: left;
   min-width: var(--notion-max-width);
   padding-left: 0;
-  transition: padding 200ms ease-out;
 }
 
 .notion-table-header {

packages/react-notion-x/src/third-party/collection-view-table.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 
 import { useNotionContext } from '../context'
 import { type CollectionViewProps } from '../types'
@@ -7,6 +7,7 @@ import { CollectionColumnTitle } from './collection-column-title'
 import { CollectionGroup } from './collection-group'
 import { getCollectionGroups } from './collection-utils'
 import { Property } from './property'
+import { useClientStyle } from './react-use'
 
 const defaultBlockIds: string[] = []
 
@@ -72,21 +73,18 @@ function Table({
 } & Omit<CollectionViewProps, 'collectionData'>) {
   const { recordMap, linkTableTitleProperties } = useNotionContext()
 
-  const tableStyle = React.useMemo(
-    () => ({
+  const tableStyle = useClientStyle(
+    {
       width,
       maxWidth: width
-    }),
-    [width]
+    },
+    { visibility: 'hidden' }
   )
 
-  const tableViewStyle = React.useMemo(
-    () => ({
-      paddingLeft: padding,
-      paddingRight: padding
-    }),
-    [padding]
-  )
+  const tableViewStyle = useClientStyle({
+    paddingLeft: padding,
+    paddingRight: padding
+  })
 
   let properties = []
 

packages/react-notion-x/src/third-party/react-use.ts

@@ -211,3 +211,19 @@ export const useLocalStorage = <T>(
 
   return [state, set, remove]
 }
+
+// Style mismatches between server rendering and client hydration can act
+// unpredictably. Style that depends on the client state should use this hook
+// can prevent the unpredictable behavior. More details here:
+// https://github.com/vercel/next.js/issues/17463
+export const useClientStyle = (
+  clientStyle: React.CSSProperties,
+  serverStyle: React.CSSProperties = {}
+) => {
+  const [isMounted, setIsMounted] = useState(false)
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  return isMounted ? clientStyle : serverStyle
+}