diff --git a/src/components/ScrollShadows.tsx b/src/components/ScrollShadows.tsx
index 3a234d926..8075280f8 100644
--- a/src/components/ScrollShadows.tsx
+++ b/src/components/ScrollShadows.tsx
@@ -1,5 +1,5 @@
 import { useResizeObserver } from "@react-aria/utils";
-import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ReactNode, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Css, Palette, Properties, useTestIds } from "src";
 
 interface ScrollShadowsProps {
@@ -64,7 +64,7 @@ export function ScrollShadows(props: ScrollShadowsProps) {
   useResizeObserver({ ref: scrollRef, onResize });
 
   // Hack for sizing more complicated components that might not be fully drawn on initial paint (such as a GridTable)
-  useEffect(() => {
+  useLayoutEffect(() => {
     // This setTimeout (without a delay) allows the current execution thread to complete (DOM is painted with the latest render)
     // by placing the callback into the async event queue to ensure the fully rendered DOM is used for the resize calculations.
     setTimeout(() => onResize(), 0);