From 2806dacc8f1e5da4517993ebcd7d81228b4b6449 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Fri, 26 Apr 2024 15:48:13 +1000
Subject: [PATCH] [IndexTable] Remove useLayoutEffect warning in SSR for
 IndexTable

---
 .changeset/proud-ways-melt.md                       |  5 +++++
 .../src/components/IndexTable/IndexTable.tsx        | 13 +++----------
 2 files changed, 8 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/proud-ways-melt.md

diff --git a/.changeset/proud-ways-melt.md b/.changeset/proud-ways-melt.md
new file mode 100644
index 00000000000..48367b1c5f2
--- /dev/null
+++ b/.changeset/proud-ways-melt.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Remove useLayoutEffect warning in SSR for IndexTable.
diff --git a/polaris-react/src/components/IndexTable/IndexTable.tsx b/polaris-react/src/components/IndexTable/IndexTable.tsx
index 5d334acfbb3..e03ecc610b7 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.tsx
+++ b/polaris-react/src/components/IndexTable/IndexTable.tsx
@@ -1,17 +1,10 @@
-import React, {
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
-  useMemo,
-  // eslint-disable-next-line no-restricted-imports -- useIsomorphicLayoutEffect is not required for this specific usecase, because we're using useLayoutEffect only for dom manipulation. It has no purpose in server side rendered code.
-  useLayoutEffect,
-} from 'react';
+import React, {useRef, useState, useEffect, useCallback, useMemo} from 'react';
 import {SortAscendingIcon, SortDescendingIcon} from '@shopify/polaris-icons';
 import type {SpaceScale} from '@shopify/polaris-tokens';
 
 import {debounce} from '../../utilities/debounce';
 import {useToggle} from '../../utilities/use-toggle';
+import {useIsomorphicLayoutEffect} from '../../utilities/use-isomorphic-layout-effect';
 import {useI18n} from '../../utilities/i18n';
 import {Badge} from '../Badge';
 import {Checkbox as PolarisCheckbox} from '../Checkbox';
@@ -427,7 +420,7 @@ function IndexTableBase({
     scrollingContainer.current = false;
   }, []);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     tableHeadings.current = getTableHeadingsBySelector(
       tableElement.current,
       '[data-index-table-heading]',