Refactor Dialog to check DOM attribute instead of useFeatureFlag hook (#7398)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: mattcosta7 <[email protected]>

Author: Copilot

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})

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', '')