From 53802424f13a07e76bc360856ba19aa337d09159 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 30 Dec 2025 13:15:36 +0000
Subject: [PATCH 1/2] Initial plan


From b22318017bbe1dba9c3b03464fe1a5dff5dc4b12 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 30 Dec 2025 13:30:14 +0000
Subject: [PATCH 2/2] Refactor Dialog to check DOM attribute instead of
 useFeatureFlag

Co-authored-by: mattcosta7 <8616962+mattcosta7@users.noreply.github.com>
---
 packages/react/src/Dialog/Dialog.tsx             | 6 ++----
 packages/react/src/FeatureFlags/FeatureFlags.tsx | 5 +++--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 0f86f6b51de..41bfa481dd0 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -16,7 +16,6 @@ import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../uti
 import classes from './Dialog.module.css'
 import {clsx} from 'clsx'
 import {useSlots} from '../hooks/useSlots'
-import {useFeatureFlag} from '../FeatureFlags'
 
 /* Dialog Version 2 */
 
@@ -290,11 +289,10 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
     [onClose],
   )
 
-  const usePerfOptimization = useFeatureFlag('primer_react_css_has_selector_perf')
-
   React.useEffect(() => {
     const scrollbarWidth = window.innerWidth - document.body.clientWidth
     const dialog = dialogRef.current
+    const usePerfOptimization = document.body.hasAttribute('data-dialog-scroll-optimized')
 
     // Add DisableScroll class to this dialog (for legacy :has() selector path)
     dialog?.classList.add(classes.DisableScroll)
@@ -318,7 +316,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
         }
       }
     }
-  }, [usePerfOptimization])
+  }, [])
 
   const header = slots.header ?? (renderHeader ?? DefaultHeader)(defaultedProps)
   const body = slots.body ?? (renderBody ?? DefaultBody)({...defaultedProps, children: childrenWithoutSlots})
diff --git a/packages/react/src/FeatureFlags/FeatureFlags.tsx b/packages/react/src/FeatureFlags/FeatureFlags.tsx
index 3cf0806cb92..c0e2ac4798f 100644
--- a/packages/react/src/FeatureFlags/FeatureFlags.tsx
+++ b/packages/react/src/FeatureFlags/FeatureFlags.tsx
@@ -1,7 +1,8 @@
 import type React from 'react'
-import {useContext, useMemo, useEffect} from 'react'
+import {useContext, useMemo} from 'react'
 import {FeatureFlagContext} from './FeatureFlagContext'
 import {FeatureFlagScope, type FeatureFlags} from './FeatureFlagScope'
+import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 export type FeatureFlagsProps = React.PropsWithChildren<{
   flags: FeatureFlags
@@ -39,7 +40,7 @@ export function FeatureFlags({children, flags}: FeatureFlagsProps) {
   const isOptimizationEnabled = value.enabled('primer_react_css_has_selector_perf')
 
   // Set body attribute for CSS :has() optimization when flag is enabled
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (isOptimizationEnabled) {
       dialogScrollOptimizedCount++
       document.body.setAttribute('data-dialog-scroll-optimized', '')