Use isomorphic layout effect everywhere (#3722)

* use isomorphic layout effect instead of layout effect

* changeset

* fix namespace

Author: mattcosta7

.changeset/two-seals-prove.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+use isomorphic layout effects only
+
+<!-- Changed components: InlineAutocomplete, MarkdownEditor -->

.eslintrc.js

@@ -143,6 +143,12 @@ module.exports = {
                 importNames: ['useSSRSafeId'],
                 message: 'Please use the `useId` hook from `src/hooks/useId.ts` instead',
               },
+              {
+                name: 'react',
+                importNames: ['useLayoutEffect'],
+                message:
+                  'Please use the `useIsomorphicLayoutEffect` hook from `src/hooks/useIsomorphicLayoutEffect.ts` instead',
+              },
             ],
             patterns: [
               {

src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx

@@ -1,11 +1,12 @@
-import React, {useLayoutEffect, useState} from 'react'
+import React, {useState} from 'react'
 import {fireEvent, render, within} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions, Trigger} from '.'
 import FormControl from '../../FormControl'
 import {ActionList} from '../../ActionList'
 import Textarea from '../../Textarea'
 import ThemeProvider from '../../ThemeProvider'
+import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
 
 const label = 'Inline Autocomplete'
 
@@ -82,7 +83,7 @@ const UncontrolledInlineAutocomplete = ({
     }
   }
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     // combobox-nav attempts to filter out 'hidden' options by checking if the option has an
     // offsetHeight or width > 0. In JSDom, all elements have offsetHeight = offsetWidth = 0,
     // so we need to override at least one to make the class recognize that any options exist.

src/drafts/MarkdownEditor/MarkdownEditor.tsx

@@ -1,13 +1,4 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'
 import Box from '../../Box'
 import VisuallyHidden from '../../_VisuallyHidden'
 import {useId} from '../../hooks/useId'
@@ -36,6 +27,7 @@ import {Emoji} from './suggestions/_useEmojiSuggestions'
 import {Mentionable} from './suggestions/_useMentionSuggestions'
 import {Reference} from './suggestions/_useReferenceSuggestions'
 import {isModifierKey} from './utils'
+import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
 
 export type MarkdownEditorProps = SxProp & {
   /** Current value of the editor as a multiline markdown string. */
@@ -268,7 +260,7 @@ const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
     useResizeObserver(onResize, containerRef)
 
     // workaround for Safari bug where layout is otherwise not recalculated
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       const container = containerRef.current
       if (!container) return
 

src/drafts/hooks/useCombobox.ts

@@ -1,6 +1,7 @@
 import Combobox from '@github/combobox-nav'
-import {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react'
+import {useCallback, useEffect, useRef, useState} from 'react'
 import {useId} from '../../hooks/useId'
+import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
 
 export type ComboboxCommitEvent<T> = {
   /** The underlying `combobox-commit` event. */
@@ -138,7 +139,7 @@ export const useCombobox = <T>({
     [onCommit, list],
   )
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const optionElements = getOptionElements()
     // Ensure each option has a unique ID (required by the Combobox class), but respect user provided IDs
     for (const [i, option] of optionElements.entries()) {

src/drafts/hooks/useDynamicTextareaHeight.ts

@@ -1,7 +1,8 @@
-import {RefObject, useCallback, useEffect, useLayoutEffect, useState} from 'react'
+import {RefObject, useCallback, useEffect, useState} from 'react'
 
 import {SxProp} from '../../sx'
 import {getCharacterCoordinates} from '../utils/character-coordinates'
+import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
 
 type UseDynamicTextareaHeightSettings = {
   disabled?: boolean
@@ -63,7 +64,7 @@ export const useDynamicTextareaHeight = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [minHeightLines, maxHeightLines, value, elementRef, disabled])
 
-  useLayoutEffect(refreshHeight, [refreshHeight])
+  useIsomorphicLayoutEffect(refreshHeight, [refreshHeight])
 
   // With Slots, initial render of the component is delayed and so the initial layout effect can occur
   // before the target element has actually been calculated in the DOM. But if we only use regular effects,

src/drafts/hooks/useSafeAsyncCallback.ts

@@ -1,4 +1,5 @@
-import {useCallback, useEffect, useLayoutEffect, useRef} from 'react'
+import {useCallback, useEffect, useRef} from 'react'
+import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
 
 export const callbackCancelledResult = Symbol('callbackCancelledResult')
 export type CallbackCancelledResult = typeof callbackCancelledResult
@@ -27,7 +28,7 @@ export const useSafeAsyncCallback = <A extends unknown[], R>(
   allowCallingAfterUnmount = false,
 ): ((...args: A) => R | CallbackCancelledResult) => {
   const trackingRef = useRef(fn)
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     trackingRef.current = fn
   }, [fn])
 

src/hooks/useId.ts

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/no-namespace
+// eslint-disable-next-line no-restricted-imports, import/no-namespace
 import * as React from 'react'
 // eslint-disable-next-line no-restricted-imports
 import {useSSRSafeId} from '@react-aria/ssr'

src/utils/useIsomorphicLayoutEffect.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import {useEffect, useLayoutEffect} from 'react'
 
 const useIsomorphicLayoutEffect =