Use Isomorphic effect

.changeset/brown-squids-unite.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Add a utility to provide useIsoMorphicEffect function and use that instead of useLayoutEffect everywhere

src/Overlay.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components'
-import React, {ReactElement, useEffect, useLayoutEffect, useRef} from 'react'
+import React, {ReactElement, useEffect, useRef} from 'react'
 import {get, COMMON, SystemPositionProps, SystemCommonProps} from './constants'
 import {ComponentProps} from './utils/types'
+import useLayoutEffect from './utils/useIsomorphicLayoutEffect'
 import {useOverlay, TouchOrMouseEvent} from './hooks'
 import Portal from './Portal'
 import sx, {SxProp} from './sx'

src/Portal/Portal.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {createPortal} from 'react-dom'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__'
 const DEFAULT_PORTAL_CONTAINER_NAME = '__default__'
@@ -69,7 +70,7 @@ export const Portal: React.FC<PortalProps> = ({children, onMount, containerName:
   hostElement.style.zIndex = '1'
   const elementRef = React.useRef(hostElement)
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     let containerName = _containerName
     if (containerName === undefined) {
       containerName = DEFAULT_PORTAL_CONTAINER_NAME

src/hooks/useAnchoredPosition.ts

@@ -2,6 +2,7 @@ import React from 'react'
 import {PositionSettings, getAnchoredPosition, AnchorPosition} from '../behaviors/anchoredPosition'
 import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
 import {useResizeObserver} from './useResizeObserver'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 export interface AnchoredPositionHookSettings extends Partial<PositionSettings> {
   floatingElementRef?: React.RefObject<Element>
@@ -41,7 +42,7 @@ export function useAnchoredPosition(
     [floatingElementRef, anchorElementRef, ...dependencies]
   )
 
-  React.useLayoutEffect(updatePosition, [updatePosition])
+  useLayoutEffect(updatePosition, [updatePosition])
 
   useResizeObserver(updatePosition)
 

src/hooks/useCombinedRefs.ts

@@ -1,4 +1,5 @@
-import React, {ForwardedRef, useRef} from 'react'
+import {ForwardedRef, useRef} from 'react'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 /**
  * Creates a ref by combining multiple constituent refs. The ref returned by this hook
@@ -11,7 +12,7 @@ import React, {ForwardedRef, useRef} from 'react'
 export function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)[]) {
   const combinedRef = useRef<T | null>(null)
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     function setRefs(current: T | null = null) {
       for (const ref of refs) {
         if (!ref) {
@@ -32,7 +33,6 @@ export function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)
       // eslint-disable-next-line react-hooks/exhaustive-deps
       setRefs(combinedRef.current)
     }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [...refs, combinedRef.current])
 

src/hooks/useResizeObserver.ts

@@ -1,7 +1,7 @@
-import React from 'react'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 export function useResizeObserver(callback: () => void) {
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     const observer = new window.ResizeObserver(() => callback())
     observer.observe(document.documentElement)
     return () => {

src/utils/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,10 @@
+import {useEffect, useLayoutEffect} from 'react'
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' &&
+  typeof window.document !== 'undefined' &&
+  typeof window.document.createElement !== 'undefined'
+    ? useLayoutEffect
+    : useEffect
+
+export default useIsomorphicLayoutEffect