fix: replace uselayouteffect with isomorphic effect (#8630)

davidmenendez · jlongshore · web-flow · commit 6ff6d26917e7 · 2025-11-14T14:42:35.000Z
Co-authored-by: Jeff Longshore &lt;madkidflash@gmail.com&gt;
diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap
diff --git a/packages/ibm-products/src/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubble.tsx b/packages/ibm-products/src/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubble.tsx
@@ -13,13 +13,7 @@ import {
   useTheme,
   usePrefix as useCarbonPrefix,
 } from '@carbon/react';
-import React, {
-  forwardRef,
-  HTMLProps,
-  RefObject,
-  useLayoutEffect,
-  useRef,
-} from 'react';
+import React, { forwardRef, HTMLProps, RefObject, useRef } from 'react';
 import {
   autoUpdate,
   computePosition,
@@ -29,6 +23,7 @@ import {
   arrow,
 } from '@floating-ui/react';
 import { pkg } from '../../../../../settings';
+import { useIsomorphicEffect } from '../../../../../global/js/hooks';
 
 interface BubbleProps extends Omit<HTMLProps<HTMLDivElement>, 'target'> {
   /**
@@ -76,7 +71,7 @@ const CoachmarkBubble = forwardRef<HTMLDivElement, BubbleProps>(
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const targetRef = useRef<Element | null>(null);
 
-    useLayoutEffect(() => {
+    useIsomorphicEffect(() => {
       if (target) {
         if (typeof target === 'string') {
           if (target === '#' || target.trim() === '') {
diff --git a/packages/ibm-products/src/components/Coachmark/utils/hooks.js b/packages/ibm-products/src/components/Coachmark/utils/hooks.js
@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useEffect, useRef, useLayoutEffect } from 'react';
+import { useEffect, useRef } from 'react';
+import { useIsomorphicEffect } from '../../../global/js/hooks';
 import { COACHMARK_OVERLAY_KIND } from './enums';
 
 /**
@@ -24,10 +25,10 @@ function useClickOutsideElement(
 ) {
   const cb = useRef(undefined);
   const isTooltip = overlayKind === COACHMARK_OVERLAY_KIND.TOOLTIP;
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     cb.current = callback;
   }, [callback]);
-  useEffect(() => {
+  useIsomorphicEffect(() => {
     function handleClickOutside(event) {
       const isOverlayOutside =
         overlayRef.current && !overlayRef.current.contains(event.target);
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSelectAll.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSelectAll.tsx
@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useCallback, useLayoutEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
+import { useIsomorphicEffect } from '../../../global/js/hooks';
 import { TableSelectAll } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
@@ -19,7 +20,7 @@ const blockClass = `${pkg.prefix}--datagrid`;
 
 const SelectAll = (datagridState: DataGridState) => {
   const [windowSize, setWindowSize] = useState<number>();
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     setWindowSize(window.innerWidth);
     /* istanbul ignore next */
     function updateSize() {
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.tsx
@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect, useState, useLayoutEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useIsomorphicEffect } from '../../../global/js/hooks';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Checkbox, OverflowMenu, OverflowMenuItem } from '@carbon/react';
@@ -39,7 +40,7 @@ const SelectAllWithToggle = ({
   }, [isAllRowsSelected, selectAllMode, onSelectAllRows]);
 
   const [windowSize, setWindowSize] = useState<number>();
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
diff --git a/packages/ibm-products/src/components/Datagrid/useResizeTable.js b/packages/ibm-products/src/components/Datagrid/useResizeTable.js
@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useLayoutEffect } from 'react';
+import { useIsomorphicEffect } from '../../global/js/hooks';
 
 const useResizeTable = (hooks) => {
   const useInstanceBeforeDimensions = (instance) => {
     const { rootRef, handleResize } = instance;
     const parent = rootRef && rootRef.current && rootRef.current.parentElement;
-    useLayoutEffect(() => {
+    useIsomorphicEffect(() => {
       if (!parent) {
         return () => {};
       }
diff --git a/packages/ibm-products/src/components/Datagrid/useSelectRows.tsx b/packages/ibm-products/src/components/Datagrid/useSelectRows.tsx
@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useCallback, useLayoutEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
+import { useIsomorphicEffect } from '../../global/js/hooks';
 import cx from 'classnames';
 import { TableSelectRow, usePrefix } from '@carbon/react';
 import { SelectAll } from './Datagrid/DatagridSelectAll';
@@ -101,7 +102,7 @@ const SelectRow = (datagridState) => {
 
   const [windowSize, setWindowSize] = useState<number>();
 
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
diff --git a/packages/ibm-products/src/components/Datagrid/useStickyColumn.ts b/packages/ibm-products/src/components/Datagrid/useStickyColumn.ts
@@ -5,13 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {
-  useEffect,
-  useRef,
-  useLayoutEffect,
-  useState,
-  MutableRefObject,
-} from 'react';
+import { useEffect, useRef, useState, MutableRefObject } from 'react';
+import { useIsomorphicEffect } from '../../global/js/hooks';
 import { debounce } from '../../global/js/utils/debounce';
 import cx from 'classnames';
 import { pkg } from '../../settings';
@@ -44,7 +39,7 @@ const useStickyColumn = (hooks: Hooks) => {
     setWindowSize(window?.innerWidth);
   }, []);
 
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     /* istanbul ignore next */
     function updateSize() {
       setWindowSize(window.innerWidth);
diff --git a/packages/ibm-products/src/components/Datagrid/utils/DatagridActions.js b/packages/ibm-products/src/components/Datagrid/utils/DatagridActions.js
@@ -27,7 +27,8 @@ import {
   MenuButton,
   MenuItem,
 } from '@carbon/react';
-import React, { useLayoutEffect, useState } from 'react';
+import React, { useState } from 'react';
+import { useIsomorphicEffect } from '../../../global/js/hooks';
 
 import { action } from 'storybook/actions';
 import { pkg } from '../../../settings';
@@ -79,7 +80,7 @@ export const DatagridActions = (datagridState) => {
 
   const [modalOpen, setModalOpen] = useState(false);
   const [size, setSize] = useState(window.innerWidth);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     function updateSize() {
       setSize(window.innerWidth);
     }
diff --git a/packages/ibm-products/src/components/PageHeader/next/PageHeader.tsx b/packages/ibm-products/src/components/PageHeader/next/PageHeader.tsx
@@ -8,13 +8,13 @@ import React, {
   type ComponentType,
   type FunctionComponent,
   useEffect,
-  useLayoutEffect,
   useState,
   useRef,
   useCallback,
   RefObject,
   forwardRef,
 } from 'react';
+import { useIsomorphicEffect } from '../../../global/js/hooks';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import {
@@ -379,7 +379,7 @@ const PageHeaderContent = React.forwardRef<
     return element.offsetHeight < element.scrollHeight;
   };
 
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     titleRef.current && isEllipsisActive(titleRef.current);
   }, [title]);
 
@@ -518,7 +518,7 @@ const PageHeaderContentPageActions = ({
 
   // need to set the grid columns width based on the menu button's width
   // to avoid overlapping when resizing
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     if (menuButtonVisibility && offsetRef.current) {
       const width = offsetRef.current.offsetWidth;
       document.documentElement.style.setProperty(
diff --git a/packages/ibm-products/src/components/ScrollGradient/constants.js b/packages/ibm-products/src/components/ScrollGradient/constants.js
@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useState, useLayoutEffect, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
+import { useIsomorphicEffect } from '../../global/js/hooks';
 
 export const ScrollStates = {
   // No scrolling required because content fits within container.
@@ -53,7 +54,7 @@ export const useIsOverflow = (ref) => {
     };
   });
 
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const { current } = ref;
     if (current) {
       if ('ResizeObserver' in window && !resizeObserver) {
diff --git a/packages/ibm-products/src/components/Tearsheet/next/Tearsheet.tsx b/packages/ibm-products/src/components/Tearsheet/next/Tearsheet.tsx
@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, {
-  useLayoutEffect,
   useState,
   useRef,
   RefObject,
@@ -15,6 +14,7 @@ import React, {
   FC,
   useEffect,
 } from 'react';
+import { useIsomorphicEffect } from '../../../global/js/hooks';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import {
@@ -191,7 +191,7 @@ export const Tearsheet = forwardRef<HTMLDivElement, TearsheetProps>(
 
     const renderPortalUse = usePortalTarget(portalTarget);
 
-    useLayoutEffect(() => {
+    useIsomorphicEffect(() => {
       const AILabelWidth =
         modalRef.current?.querySelector(`.${carbonPrefix}--ai-label`)
           ?.clientWidth ?? 0;
@@ -229,7 +229,7 @@ export const Tearsheet = forwardRef<HTMLDivElement, TearsheetProps>(
       verticalGap,
     ]);
 
-    useLayoutEffect(() => {
+    useIsomorphicEffect(() => {
       if (bodyRef.current) {
         notifyStack?.(uniqueId.current, open, bodyRef.current);
       }
diff --git a/packages/ibm-products/src/components/Tearsheet/next/TearsheetHeaderActions.tsx b/packages/ibm-products/src/components/Tearsheet/next/TearsheetHeaderActions.tsx
@@ -6,13 +6,8 @@
  */
 
 import { MenuButton, MenuButtonProps, MenuItem } from '@carbon/react';
-import React, {
-  ReactElement,
-  ReactNode,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { ReactElement, ReactNode, useRef, useState } from 'react';
+import { useIsomorphicEffect } from '../../../global/js/hooks';
 import { blockClass } from './context';
 import { createOverflowHandler } from '@carbon/utilities';
 import cx from 'classnames';
@@ -50,7 +45,7 @@ export const TearsheetHeaderActions = ({
 
   // need to set the grid columns width based on the menu button's width
   // to avoid overlapping when resizing
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     if (menuButtonVisibility && offsetRef.current) {
       const width = offsetRef.current.offsetWidth;
       document.documentElement.style.setProperty(
@@ -69,7 +64,7 @@ export const TearsheetHeaderActions = ({
     }
     return React.isValidElement(child);
   });
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     //Menu button will be rendered only if they pass the items in TearsheetHeaderActionItem
     if (!containerRef.current || hasOtherChildType.current) {
       return;
diff --git a/packages/ibm-products/src/global/js/hooks/useIsomorphicEffect.ts b/packages/ibm-products/src/global/js/hooks/useIsomorphicEffect.ts
@@ -1,13 +1,12 @@
 /**
- * Copyright IBM Corp. 2024, 2024
+ * Copyright IBM Corp. 2024, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import { useEffect, useLayoutEffect } from 'react';
 
-// Originally from `@carbon/react`, https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/internal/useIsomorphicEffect.js
-// useLayoutEffect on the client, useEffect on the server
+// Custom hook that uses either `useLayoutEffect` or `useEffect` based on the environment (client-side or server-side).
 export const useIsomorphicEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
diff --git a/packages/ibm-products/src/global/js/hooks/useResizeObserver.ts b/packages/ibm-products/src/global/js/hooks/useResizeObserver.ts
@@ -4,7 +4,8 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { useRef, useState, useLayoutEffect, useEffect, RefObject } from 'react';
+import { useRef, useState, useEffect, RefObject } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
 
 export const useResizeObserver = (
   ref: RefObject<HTMLElement | null>,
@@ -16,7 +17,7 @@ export const useResizeObserver = (
   const cb = useRef(onResize);
 
   useEffect(() => {
-    // ref for onResize removes it as dependency from useLayoutEffect
+    // ref for onResize removes it as dependency from useIsomorphicEffect
     // This significantly reduces repeated calls if a function is redefined on every
     // render
     cb.current = onResize;
@@ -61,7 +62,7 @@ export const useResizeObserver = (
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [width, height]);
 
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     if (!ref?.current) {
       return;
     }
diff --git a/packages/ibm-products/src/global/js/hooks/useWindowResize.js b/packages/ibm-products/src/global/js/hooks/useWindowResize.js
@@ -4,7 +4,8 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { useRef, useLayoutEffect } from 'react';
+import { useRef } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
 
 const windowExists = typeof window !== `undefined`;
 
@@ -31,7 +32,7 @@ export const useWindowResize = (effect, deps, throttleInterval = 0) => {
     throttleTimeout.current = null;
   };
 
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const handleResize = () => {
       if (throttleInterval) {
         if (throttleTimeout.current === null) {
diff --git a/packages/ibm-products/src/global/js/hooks/useWindowScroll.js b/packages/ibm-products/src/global/js/hooks/useWindowScroll.js
@@ -4,7 +4,8 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { useRef, useLayoutEffect } from 'react';
+import { useRef } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
 import { scrollableAncestor } from '../utils/scrollableAncestor';
 
 const windowExists = typeof window !== `undefined`;
@@ -44,7 +45,7 @@ const useTargetScroll = function (target, effect, deps, throttleInterval) {
     throttleTimeout.current = null;
   };
 
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const handleScroll = () => {
       if (throttleInterval) {
         if (throttleTimeout.current === null) {
