fix: do not use useLayoutEffect on SSR (#2140)

WTTJ · Jul 31, 2023 · eacb9a5 · eacb9a5
1 parent 47a49d7
commit eacb9a5
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 18 deletions.
diff --git a/packages/Field/package.json b/packages/Field/package.json
@@ -49,7 +49,8 @@
     "@welcome-ui/field-group": "^5.0.0-alpha.41",
     "@welcome-ui/hint": "^5.0.0-alpha.40",
     "@welcome-ui/label": "^5.0.0-alpha.41",
-    "@welcome-ui/system": "^5.0.0-alpha.40"
+    "@welcome-ui/system": "^5.0.0-alpha.40",
+    "@welcome-ui/utils": "^5.0.0-alpha.37"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "^3.7.3",

diff --git a/packages/Field/src/index.tsx b/packages/Field/src/index.tsx
@@ -1,7 +1,8 @@
-import React, { Fragment, useLayoutEffect } from 'react'
+import React, { Fragment } from 'react'
 import { Label } from '@welcome-ui/label'
 import { Hint } from '@welcome-ui/hint'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
+import { useIsomorphicLayoutEffect } from '@welcome-ui/utils'
 
 // Fields
 import { RowContainer } from './layout'
@@ -66,7 +67,7 @@ export const Field = forwardRef<'div', FieldProps>(
       ...(isGroup ? { flexDirection: layout } : {}),
     })
 
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       Object.keys(children.props).forEach(prop => {
         if (forwardedProps.includes(prop)) {
           const element = document.getElementById(htmlFor)

diff --git a/packages/Popover/package.json b/packages/Popover/package.json
@@ -50,6 +50,7 @@
     "@welcome-ui/button": "^5.0.0-alpha.40",
     "@welcome-ui/icons": "^5.0.0-alpha.41",
     "@welcome-ui/system": "^5.0.0-alpha.40",
+    "@welcome-ui/utils": "^5.0.0-alpha.37",
     "reakit": "^1.3.11"
   },
   "peerDependencies": {

diff --git a/packages/Popover/src/Trigger.tsx b/packages/Popover/src/Trigger.tsx
@@ -1,5 +1,6 @@
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
-import React, { useLayoutEffect, useRef } from 'react'
+import React, { useRef } from 'react'
+import { useIsomorphicLayoutEffect } from '@welcome-ui/utils'
 
 import { UsePopoverStateReturn } from './usePopoverState'
 import * as S from './styles'
@@ -48,7 +49,7 @@ export const Trigger = forwardRef<'button', TriggerProps>(({ as, state, ...rest
     }
   }
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const disclosure = disclosureRef.current
     if (hoverable && disclosure) {
       // add listeners on mount

diff --git a/packages/Tabs/src/ActiveBar.tsx b/packages/Tabs/src/ActiveBar.tsx
@@ -1,6 +1,7 @@
-import React, { useLayoutEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { useViewportSize } from '@welcome-ui/utils'
 import { TabStateReturn } from 'reakit'
+import { useIsomorphicLayoutEffect } from '@welcome-ui/utils'
 
 import * as S from './styles'
 
@@ -17,7 +18,8 @@ function useActiveBarState(
 ): ActiveBarStateReturn {
   const [state, setState] = useState({})
   const { height: viewportHeight, width: viewportWidth } = useViewportSize()
-  useLayoutEffect(() => {
+
+  useIsomorphicLayoutEffect(() => {
     const list = listRef.current
     if (!list || !activeTab) return
 

diff --git a/packages/Tooltip/package.json b/packages/Tooltip/package.json
@@ -48,6 +48,7 @@
   "dependencies": {
     "@welcome-ui/box": "^5.0.0-alpha.40",
     "@welcome-ui/system": "^5.0.0-alpha.40",
+    "@welcome-ui/utils": "^5.0.0-alpha.37",
     "popper.js": "^1.16.1",
     "reakit": "^1.3.11"
   },

diff --git a/packages/Tooltip/src/index.tsx b/packages/Tooltip/src/index.tsx
@@ -1,16 +1,10 @@
-import React, {
-  cloneElement,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react'
+import React, { cloneElement, useCallback, useEffect, useRef, useState } from 'react'
 import Popper, { Placement } from 'popper.js'
 import { TooltipReference, useTooltipState } from 'reakit'
 import { useDialogState } from 'reakit'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 import { Box } from '@welcome-ui/box'
+import { useIsomorphicLayoutEffect } from '@welcome-ui/utils'
 
 import * as S from './styles'
 
@@ -49,7 +43,7 @@ const useMouseTooltipState = ({
     }
   }, [originalPlacement, dialog.visible])
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     createPopper()
     return () => {
       if (popper.current) {

diff --git a/packages/Utils/src/use-viewport.ts b/packages/Utils/src/use-viewport.ts
@@ -1,4 +1,6 @@
-import { useLayoutEffect, useState } from 'react'
+import { useState } from 'react'
+
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect'
 
 type Size = {
   height: number
@@ -8,7 +10,7 @@ type Size = {
 export function useViewportSize(): Size {
   const [size, setSize] = useState<Size>({ height: undefined, width: undefined })
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setSize({ width: window.innerWidth, height: window.innerHeight })
 
     function handleResize() {