fix(react): rename useIsMount & update useEffect to useIsomorphicLayo…

…utEffect (#246)

.changeset/tame-shrimps-rescue.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+fix(react): convert Suspense.CSROnly's useEffect into useIsomorphicLayoutEffect to prevent unnecessary layout shift

packages/react/src/Suspense.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps, ComponentType, ReactNode, SuspenseProps as ReactSuspenseProps } from 'react'
 import { Suspense as ReactSuspense, createContext, useContext } from 'react'
-import { useIsMounted } from './hooks'
+import { useIsClient } from './hooks'
 import type { PropsWithoutChildren } from './types'
 
 export type SuspenseProps = ReactSuspenseProps
@@ -21,10 +21,10 @@ if (process.env.NODE_ENV !== 'production') {
   DefaultSuspense.displayName = 'Suspense'
 }
 const CSROnlySuspense = (props: SuspenseProps) => {
-  const isMounted = useIsMounted()
+  const isClient = useIsClient()
   const fallback = useFallbackWithContext(props.fallback)
 
-  return isMounted ? <ReactSuspense {...props} fallback={fallback} /> : <>{fallback}</>
+  return isClient ? <ReactSuspense {...props} fallback={fallback} /> : <>{fallback}</>
 }
 if (process.env.NODE_ENV !== 'production') {
   CSROnlySuspense.displayName = 'Suspense.CSROnly'

packages/react/src/hooks/index.ts

@@ -1,5 +1,5 @@
 export { useIsChanged } from './useIsChanged'
-export { useIsMounted } from './useIsMounted'
+export { useIsClient } from './useIsClient'
 export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 export { useKey } from './useKey'
 export { usePrevious } from './usePrevious'

packages/react/src/hooks/useIsClient.spec.ts

@@ -0,0 +1,12 @@
+import { renderHook } from '@testing-library/react'
+import { useIsClient } from '.'
+
+describe('useIsClient', () => {
+  it('should return true when client side painting start', () => {
+    const {
+      result: { current: isClient },
+    } = renderHook(() => useIsClient())
+
+    expect(isClient).toBe(true)
+  })
+})

packages/react/src/hooks/useIsClient.ts

@@ -0,0 +1,12 @@
+import { useState } from 'react'
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
+
+export const useIsClient = () => {
+  const [isClient, setIsClient] = useState(false)
+
+  useIsomorphicLayoutEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  return isClient
+}