refactor: scope PR to Autocomplete + LabelGroup render-derivation

Retargets base to main and drops the old #8001 leftovers (useMedia, SelectPanel,
ToggleSwitch, ValidationAnimationContainer, Dialog, TreeView, SelectPanel2),
which are handled by their own focused PRs. Keeps only the Autocomplete close-time
re-sort and LabelGroup numeric-truncation render derivations.

Author: mattcosta7

.changeset/derive-state-from-effects.md

@@ -492,7 +492,6 @@ const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>>
     if (hasRendered === 1) {
       autoFocusRef.current?.focus()
     } else {
-      // Counts commits so focus is deferred by one render (a commit-timing hack), not derivable.
       // eslint-disable-next-line react-hooks/set-state-in-effect, react-you-might-not-need-an-effect/no-derived-state
       setHasRendered(hasRendered + 1)
     }

packages/react/src/Dialog/Dialog.tsx

@@ -245,16 +245,11 @@ function Panel({
     isSingleSelectModal ? selected : undefined,
   )
 
-  // Reset the intermediate selected item when the panel is opened or closed.
-  // Tracking the previous `open` value in state lets us derive this during render
-  // instead of in an effect. Adjusting state during render this way does not cause
-  // an extra committed render — React re-renders synchronously before painting —
-  // and a ref cannot be used here because writing refs during render is disallowed.
-  const [prevOpen, setPrevOpen] = useState(open)
-  if (prevOpen !== open) {
-    setPrevOpen(open)
+  // Reset the intermediate selected item when the panel is open/closed
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect, react-you-might-not-need-an-effect/no-derived-state
     setIntermediateSelected(isSingleSelectModal ? selected : undefined)
-  }
+  }, [isSingleSelectModal, open, selected])
 
   const onListContainerRefChanged: FilteredActionListProps['onListContainerRefChanged'] = useCallback(
     (node: HTMLElement | null) => {
@@ -397,8 +392,7 @@ function Panel({
     if (open) {
       // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
       if (items.length === 0 && !(isLoading || loading)) {
-        // We need to wait for the listContainerElement to disappear before announcing no items,
-        // otherwise it will be interrupted — this depends on commit timing, so it must run in an effect.
+        // we need to wait for the listContainerElement to disappear before announcing no items, otherwise it will be interrupted
         // eslint-disable-next-line react-hooks/set-state-in-effect, react-you-might-not-need-an-effect/no-adjust-state-on-prop-change
         setNeedsNoItemsAnnouncement(true)
       }
@@ -479,8 +473,7 @@ function Panel({
       // Only trigger filter change event if there are no items
       // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
       if (items.length === 0) {
-        // Trigger filter event to populate panel on first open. This calls a consumer callback
-        // (a side effect), so it must run in an effect rather than during render.
+        // Trigger filter event to populate panel on first open
         // eslint-disable-next-line react-hooks/set-state-in-effect
         onFilterChange(filterValue, null)
       }

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -123,16 +123,12 @@ const ToggleSwitch = React.forwardRef<HTMLButtonElement, ToggleSwitchProps>(func
     }
   }, [onChange, checked, isControlled, disabled])
 
-  // Hiding the loading label is pure state derived from `loading`, so compute it
-  // during render. Only the delayed reveal needs a timer, which stays in the
-  // effect below.
-  if (!loading && isLoadingLabelVisible) {
-    setIsLoadingLabelVisible(false)
-  }
-
   useEffect(() => {
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if (loading && !isLoadingLabelVisible) {
+    if (!loading && isLoadingLabelVisible) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect, react-you-might-not-need-an-effect/no-chain-state-updates
+      setIsLoadingLabelVisible(false)
+      // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
+    } else if (loading && !isLoadingLabelVisible) {
       safeSetTimeout(() => {
         setIsLoadingLabelVisible(true)
       }, loadingLabelDelay)

packages/react/src/ToggleSwitch/ToggleSwitch.tsx

@@ -556,8 +556,6 @@ const SubTree: FCWithSlotMarker<TreeViewSubTreeProps> = ({count, state, children
     const parentElement = document.getElementById(itemId)
     if (!parentElement) return
 
-    // `getAccessibleName` reads the committed DOM, so the label cannot be derived during
-    // render and must be set from an effect.
     // eslint-disable-next-line react-hooks/set-state-in-effect, react-you-might-not-need-an-effect/no-chain-state-updates
     setSubTreeLabel(getAccessibleName(parentElement))
     if (previousState === 'loading' && state === 'done') {

packages/react/src/TreeView/TreeView.tsx

@@ -329,8 +329,6 @@ const SelectPanelButton = React.forwardRef<HTMLButtonElement, ButtonProps>((prop
   useEffect(() => {
     const label = document.querySelector(`[for='${inputProps.id}']`)
     if (label?.textContent) {
-      // Reads the associated label's `textContent` from the committed DOM, so it must run in
-      // an effect.
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setLabelText(label.textContent)
     }

packages/react/src/experimental/SelectPanel2/SelectPanel.tsx

@@ -8,14 +8,11 @@ type MediaQueryEventListener = (event: {matches: boolean}) => void
 
 function mockMatchMedia({defaultMatch = false} = {}) {
   const listeners = new Set<MediaQueryEventListener>()
-  // Track the current match state so that reading `matchMedia(query).matches`
-  // reflects the latest value, mirroring real `MediaQueryList` behavior.
-  let currentMatches = defaultMatch
 
   Object.defineProperty(window, 'matchMedia', {
     writable: true,
     value: vi.fn().mockImplementation(query => ({
-      matches: currentMatches,
+      matches: defaultMatch,
       media: query,
       onchange: null,
       addListener: vi.fn(), // deprecated
@@ -32,7 +29,6 @@ function mockMatchMedia({defaultMatch = false} = {}) {
 
   return {
     change({matches = false}) {
-      currentMatches = matches
       for (const listener of listeners) {
         listener({
           matches,
@@ -76,32 +72,10 @@ describe('useMedia', () => {
       return null
     }
 
-    // `renderToString` uses the server snapshot, which defaults to `false` when
-    // no `defaultState` is provided.
     ReactDOM.renderToString(<TestComponent />)
     expect(match[0]).toBe(false)
   })
 
-  it('does not warn about a missing defaultState on the client', () => {
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-
-    function TestComponent() {
-      useMedia('(pointer: coarse)')
-      return null
-    }
-
-    // On the client (where `window` is defined) the hook reads `matchMedia`
-    // directly, so the SSR guidance warning must not appear in the browser
-    // console — including during hydration, when `getServerSnapshot` runs.
-    render(<TestComponent />)
-
-    expect(warnSpy).not.toHaveBeenCalledWith(
-      'Warning:',
-      expect.stringContaining('`useMedia` When server side rendering'),
-    )
-    warnSpy.mockRestore()
-  })
-
   it('should respond to change in matchMedia values', () => {
     const {change} = mockMatchMedia()
 

packages/react/src/hooks/__tests__/useMedia.test.tsx

@@ -1,4 +1,5 @@
-import {useCallback, useContext, useSyncExternalStore} from 'react'
+import React, {useContext, useEffect} from 'react'
+import {canUseDOM} from '../utils/environment'
 import {warning} from '../utils/warning'
 import {MatchMediaContext} from './MatchMediaContext'
 
@@ -17,69 +18,71 @@ import {MatchMediaContext} from './MatchMediaContext'
  */
 export function useMedia(mediaQueryString: string, defaultState?: boolean) {
   const features = useContext(MatchMediaContext)
-  // When the query is provided through `MatchMedia` context, that value always
-  // wins and there is nothing external to subscribe to.
-  const contextValue = features[mediaQueryString] as boolean | undefined
+  const [matches, setMatches] = React.useState(() => {
+    if (features[mediaQueryString] !== undefined) {
+      return features[mediaQueryString] as boolean
+    }
 
-  const subscribe = useCallback(
-    (onStoreChange: () => void) => {
-      if (contextValue !== undefined) {
-        return () => {}
-      }
+    // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
+    if (defaultState !== undefined) {
+      return defaultState
+    }
 
-      const mediaQueryList = window.matchMedia(mediaQueryString)
+    if (canUseDOM) {
+      return window.matchMedia(mediaQueryString).matches
+    }
 
-      // Support fallback to `addListener` for broader browser support
-      // @ts-ignore this is not present in Safari <14
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (mediaQueryList.addEventListener) {
-        mediaQueryList.addEventListener('change', onStoreChange)
-        return () => {
-          mediaQueryList.removeEventListener('change', onStoreChange)
-        }
-      }
+    // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
+    warning(
+      true,
+      '`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.',
+    )
 
-      mediaQueryList.addListener(onStoreChange)
-      return () => {
-        mediaQueryList.removeListener(onStoreChange)
-      }
-    },
-    [contextValue, mediaQueryString],
-  )
+    return false
+  })
+
+  if (features[mediaQueryString] !== undefined && matches !== features[mediaQueryString]) {
+    setMatches(features[mediaQueryString] as boolean)
+  }
 
-  const getSnapshot = useCallback(() => {
-    if (contextValue !== undefined) {
-      return contextValue
+  useEffect(() => {
+    // If `mediaQueryString` is present in features through `context` defer to
+    // the value present instead of checking with matchMedia
+    if (features[mediaQueryString] !== undefined) {
+      return
     }
-    return window.matchMedia(mediaQueryString).matches
-  }, [contextValue, mediaQueryString])
 
-  const getServerSnapshot = useCallback(() => {
-    if (contextValue !== undefined) {
-      return contextValue
+    function listener(event: MediaQueryListEvent) {
+      setMatches(event.matches)
     }
 
-    // Prevent a React hydration mismatch when a default value is provided by not
-    // defaulting to `window.matchMedia(query).matches`.
-    if (defaultState !== undefined) {
-      return defaultState
+    const mediaQueryList = window.matchMedia(mediaQueryString)
+
+    // Support fallback to `addListener` for broader browser support
+    // @ts-ignore this is not present in Safari <14
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener('change', listener)
+    } else {
+      mediaQueryList.addListener(listener)
     }
 
-    // A default value has not been provided, and you are rendering on the
-    // server, warn of a possible hydration mismatch when defaulting to false.
-    // `getServerSnapshot` also runs on the client during hydration; only warn on
-    // the actual server so we don't surface this message in the browser console
-    // (matching the previous behavior, where the client read `matchMedia` and
-    // stayed quiet).
-    warning(
-      typeof window === 'undefined',
-      '`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.',
-    )
+    // Make sure the media query list is in sync with the matches state
+    // eslint-disable-next-line react-hooks/set-state-in-effect, react-you-might-not-need-an-effect/no-external-store-subscription
+    setMatches(mediaQueryList.matches)
 
-    return false
-  }, [contextValue, defaultState])
+    return () => {
+      // @ts-ignore this is not present in Safari <14
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (mediaQueryList.addEventListener) {
+        mediaQueryList.removeEventListener('change', listener)
+      } else {
+        mediaQueryList.removeListener(listener)
+      }
+    }
+  }, [features, mediaQueryString])
 
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+  return matches
 }
 
 export {MatchMedia} from './MatchMedia'

packages/react/src/hooks/useMedia.ts

@@ -1,6 +1,6 @@
 import type {HTMLProps} from 'react'
 import type React from 'react'
-import {useState} from 'react'
+import {useEffect, useState} from 'react'
 import classes from './ValidationAnimationContainer.module.css'
 
 interface Props extends HTMLProps<HTMLDivElement> {
@@ -9,12 +9,10 @@ interface Props extends HTMLProps<HTMLDivElement> {
 const ValidationAnimationContainer: React.FC<React.PropsWithChildren<Props>> = ({show, children}) => {
   const [shouldRender, setRender] = useState(show)
 
-  // Mounting is derived from `show`, so compute it during render. Un-mounting is
-  // deferred to `onAnimationEnd` so the exit animation can play. Deriving this in
-  // render avoids the extra commit/paint an effect + setState would introduce.
-  if (show && !shouldRender) {
-    setRender(true)
-  }
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect, react-you-might-not-need-an-effect/no-derived-state, react-you-might-not-need-an-effect/no-event-handler
+    if (show) setRender(true)
+  }, [show])
 
   const onAnimationEnd = () => {
     if (!show) setRender(false)