@tamagui/core 1.0.1-beta.216 → 1.0.1-beta.217

package/src/createComponent.tsx

@@ -1,5 +1,5 @@
 import { useComposedRefs } from '@tamagui/compose-refs'
-import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { isClient, isRSC, isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 /* eslint-disable react-hooks/rules-of-hooks */
 import {
   composeEventHandlers,
@@ -29,23 +29,18 @@ import { stackDefaultStyles } from './constants/constants'
 import { FontLanguageContext } from './contexts/FontLanguageContext'
 import { TextAncestorContext } from './contexts/TextAncestorContext'
 import { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'
-import {
-  SplitStyleResult,
-  getSubStyle,
-  insertSplitStyles,
-  useSplitStyles,
-} from './helpers/getSplitStyles'
+import { getSubStyle, useSplitStyles } from './helpers/getSplitStyles'
 import { getAllSelectors } from './helpers/insertStyleRule'
 import { mergeProps } from './helpers/mergeProps'
 import { mergeTransform } from './helpers/mergeTransform'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables'
-import { pseudoDescriptors } from './helpers/pseudoDescriptors'
 import { useShallowSetState } from './helpers/useShallowSetState'
 import { getRect, measureLayout, useElementLayout } from './hooks/useElementLayout'
 import { addMediaQueryListener, getInitialMediaState } from './hooks/useMedia'
 import { useServerRef, useServerState } from './hooks/useServerHooks'
 import { getThemeManager, useTheme } from './hooks/useTheme'
 import {
+  DebugProp,
   SpaceDirection,
   SpaceTokens,
   SpacerProps,
@@ -140,7 +135,6 @@ export function createComponent<
   let defaultNativeStyle: any
   let tamaguiDefaultProps: any
   let defaultTag: string | undefined
-  let initialSplitStyles: SplitStyleResult
 
   // see onConfiguredOnce below which attaches a name then to this component
   const component = forwardRef<Ref, ComponentPropTypes>((propsIn: any, forwardedRef) => {
@@ -157,7 +151,7 @@ export function createComponent<
 
     // time`mergeProps`
 
-    const debugProp = props['debug']
+    const debugProp = props['debug'] as DebugProp
     const { Component, isText, isZStack } = staticConfig
     const componentName = props.componentName || staticConfig.componentName
     const componentClassName = props.asChild
@@ -194,7 +188,7 @@ export function createComponent<
     )
 
     if (process.env.NODE_ENV === 'development') {
-      if (props['debug']) {
+      if (debugProp) {
         const name = `${
           componentName || Component?.displayName || Component?.name || '[Unnamed Component]'
         }`
@@ -203,8 +197,18 @@ export function createComponent<
         const banner = `${name}${dataIs ? ` ${dataIs}` : ''} ${type}`
         // eslint-disable-next-line no-console
         console.group(`%c ${banner}`, 'background: yellow;')
-        // eslint-disable-next-line no-console
-        console.log(`state`, state)
+        if (!isServer) {
+          // eslint-disable-next-line no-console
+          console.log(`state`, state)
+          // eslint-disable-next-line no-console
+          console.groupCollapsed('props')
+          // eslint-disable-next-line no-console
+          console.log(props)
+          // eslint-disable-next-line no-console
+          console.log('order', Object.keys(props))
+          // eslint-disable-next-line no-console
+          console.groupEnd()
+        }
       }
     }
 
@@ -254,19 +258,18 @@ export function createComponent<
 
     // time`setupStateConf`
 
-    const splitStyleState: SplitStyleState = {
-      ...state,
-      noClassNames,
-      dynamicStylesInline: noClassNames,
-      hasTextAncestor,
-      resolveVariablesAs: 'value',
-    }
     const splitStyles = useSplitStyles(
       props,
       staticConfig,
       theme,
-      splitStyleState,
-      props.asChild ? null : initialSplitStyles,
+      {
+        ...state,
+        noClassNames,
+        dynamicStylesInline: noClassNames,
+        hasTextAncestor,
+        resolveVariablesAs: 'value',
+      },
+      null,
       languageContext || undefined,
       elementType,
       debugProp
@@ -593,7 +596,7 @@ export function createComponent<
       }, [unPress])
     }
 
-    let styles: any[]
+    let styles: Record<string, any>[]
 
     if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
       styles = {
@@ -607,11 +610,7 @@ export function createComponent<
       // ugly but for now...
       if (shouldForcePseudo) {
         const next = {}
-        for (const style of styles) {
-          if (style) {
-            Object.assign(next, style)
-          }
-        }
+        styles.forEach((style) => Object.assign(next, style))
         // @ts-ignore
         Object.assign(splitStyles.style, next)
       }
@@ -687,16 +686,11 @@ export function createComponent<
       viewProps.style = styles
     }
 
-    // TODO need to loop active variants and see if they have matchin pseudos and apply as well
-    const initialPseudos = initialSplitStyles?.pseudos
-    const runtimePressStyle = noClassNames && (pseudos?.pressStyle || initialPseudos?.pressStyle)
+    const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle
     const attachPress = !!(runtimePressStyle || onPress || onPressOut || onPressIn || onClick)
-
-    const isHoverable = isWeb
-    const runtimeHoverStyle = noClassNames && (pseudos?.hoverStyle || initialPseudos.hoverStyle)
-    const attachHover =
-      isHoverable &&
-      !!(runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)
+    const runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle
+    const isHoverable =
+      isWeb && !!(runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)
 
     const handlesPressEvents = !isWeb && !asChild
 
@@ -706,7 +700,7 @@ export function createComponent<
       ? false
       : Boolean(
           attachPress ||
-            attachHover ||
+            isHoverable ||
             'pressStyle' in props ||
             'onPress' in props ||
             'onPressIn' in props ||
@@ -729,28 +723,28 @@ export function createComponent<
                   onMouseUp?.(e)
                 }
               : undefined,
-            ...(attachHover && {
-              onMouseEnter: attachHover
+            ...(isHoverable && {
+              onMouseEnter: isHoverable
                 ? (e) => {
                     const next: Partial<typeof state> = {}
-                    if (attachHover) {
+                    if (isHoverable) {
                       next.hover = true
                     }
                     if (state.pressIn) {
                       next.press = true
                     }
-                    if (attachHover || state.pressIn) {
+                    if (isHoverable || state.pressIn) {
                       setStateShallow(next)
                     }
                     onHoverIn?.(e)
                     onMouseEnter?.(e)
                   }
                 : undefined,
-              onMouseLeave: attachHover
+              onMouseLeave: isHoverable
                 ? (e) => {
                     const next: Partial<typeof state> = {}
                     mouseUps.add(unPress)
-                    if (attachHover) {
+                    if (isHoverable) {
                       next.hover = false
                     }
                     if (state.pressIn) {
@@ -855,7 +849,7 @@ export function createComponent<
     // EVENTS native
     if (process.env.TAMAGUI_TARGET === 'native') {
       // add focus events
-      const attachFocus = !!(pseudos.focusStyle || (initialPseudos && initialPseudos.focusStyle))
+      const attachFocus = !!pseudos.focusStyle
       if (attachFocus) {
         viewProps.onFocus = mergeEvent(viewProps.onFocus, () => {
           setStateShallow({ focus: true })
@@ -917,7 +911,7 @@ export function createComponent<
         if (typeof window !== 'undefined') {
           // prettier-ignore
           // eslint-disable-next-line no-console
-          console.log({ state, shouldProvideThemeManager, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, defaultNativeStyle, initialSplitStyles, ...(typeof window !== 'undefined' ? { theme, themeClassName:  theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null) })
+          console.log({ state, shouldProvideThemeManager, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, defaultNativeStyle, ...(typeof window !== 'undefined' ? { theme, themeClassName:  theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null) })
         }
         // eslint-disable-next-line no-console
         console.groupEnd()
@@ -994,50 +988,22 @@ export function createComponent<
     const debug = defaultPropsIn['debug']
 
     // remove all classNames
-    const [ourProps, ourClassNames] = mergeProps(defaultPropsIn, {}, true)
+    const [ourProps, ourClassNames] = mergeProps(defaultPropsIn, {})
 
     if (ourProps.tag) {
       defaultTag = ourProps.tag
     }
 
     const noClassNames = !staticConfig.acceptsClassName
-
-    initialSplitStyles = insertSplitStyles(
-      ourProps,
-      staticConfig,
-      initialTheme,
-      {
-        unmounted: false,
-        hover: false,
-        press: false,
-        pressIn: false,
-        focus: false,
-        resolveVariablesAs: 'both',
-        noClassNames,
-      },
-      undefined,
-      undefined,
-      debug
-    )
+    const { name, variants, defaultVariants, ...restProps } = ourProps
 
     // must preserve prop order
     // leave out className because we handle that already with initialSplitStyles.classNames
     // otherwise it confuses variant functions getting className props
-    const [defaults, defaultsClassnames] = mergeProps(
-      component.defaultProps as any,
-      isWeb
-        ? { ...initialSplitStyles.pseudos, ...initialSplitStyles.viewProps }
-        : initialSplitStyles.viewProps,
-      true
-      // conf.inverseShorthands
-    )
-
-    // avoid passing className props to variants
-    initialSplitStyles.classNames = {
-      ...defaultsClassnames,
-      ...initialSplitStyles.classNames,
-      ...ourClassNames,
-    }
+    const [defaults, defaultsClassnames] = mergeProps(component.defaultProps as any, {
+      ...defaultVariants,
+      ...restProps,
+    })
 
     defaultNativeStyle = {}
 
@@ -1056,40 +1022,15 @@ export function createComponent<
       }
     }
 
-    if (Object.keys(defaults).length) {
-      tamaguiDefaultProps = defaults
-
-      // temp bugfix, splitStyles isn't returning variables when resolveVariablesAs == 'both'
-      if (!isWeb) {
-        Object.keys(pseudoDescriptors).forEach((k) => {
-          if (ourProps[k]) {
-            // @ts-ignore
-            initialSplitStyles.pseudos[k] = null
-            tamaguiDefaultProps[k] = ourProps[k]
-          }
-        })
-      }
-    }
+    // set to global
+    tamaguiDefaultProps = defaults
 
     // add debug logs
     if (process.env.NODE_ENV === 'development' && debug) {
       if (process.env.IS_STATIC !== 'is_static') {
+        // prettier-ignore
         // eslint-disable-next-line no-console
-        console.log(`🐛 [${staticConfig.componentName || 'Component'}]`, {
-          staticConfig,
-          initialSplitStyles,
-          tamaguiDefaultProps,
-          defaultNativeStyle,
-          defaults,
-          defaultPropsIn,
-          defaultPropsKeyOrder: Object.keys(staticConfig.defaultProps),
-          defaultPropsInKeyOrder: Object.keys(defaultPropsIn).map((k) => [k, defaultPropsIn[k]]),
-          ourProps,
-          ourClassNames,
-          defaultsClassnames,
-          defaultTag,
-          noClassNames,
-        })
+        console.log(`🐛 [${staticConfig.componentName || 'Component'}]`, { staticConfig, tamaguiDefaultProps, defaultNativeStyle, defaults, defaultPropsIn, defaultPropsKeyOrder: Object.keys(staticConfig.defaultProps), defaultPropsInKeyOrder: Object.keys(defaultPropsIn).map((k) => [k, defaultPropsIn[k]]), ourProps, ourClassNames, defaultsClassnames, defaultTag, noClassNames, })
       }
     }
   })

package/src/createTamagui.ts

@@ -195,8 +195,8 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     tokensParsed,
     parsed: true,
     getCSS: () => `
-.is_Text .is_Text { display: inline-flex; }
-._dsp_contents { display: contents; }
+.is_Text .is_Text {display:inline-flex;}
+._dsp_contents {display:contents;}
 ${themeConfig.css}
 ${getAllRules().join('\n')}
 `,

package/src/helpers/getSplitStyles.tsx

@@ -196,21 +196,9 @@ export const getSplitStyles: StyleSplitter = (
   const shouldDoClasses =
     staticConfig.acceptsClassName && (isWeb || IS_STATIC) && !state.noClassNames
 
-  let style: ViewStyle = {}
+  const style: ViewStyle = {}
   let flatTransforms: Record<string, any> | undefined
 
-  function mergeStyle(key: string, val: any) {
-    usedKeys[key] = usedKeys[key] || 1
-    if (val && val[0] === '_') {
-      classNames[key] = val
-    } else if (key in stylePropsTransform) {
-      flatTransforms ||= {}
-      flatTransforms[key] = val
-    } else {
-      style[key] = normalizeValueWithProperty(val, key)
-    }
-  }
-
   const len = propKeys.length
   const rulesToInsert: RulesToInsert = []
   const classNames: ClassNamesObject = {}
@@ -225,6 +213,18 @@ export const getSplitStyles: StyleSplitter = (
     let keyInit = propKeys[i]
     const valInit = props[keyInit]
 
+    if (validStyleProps[keyInit] || keyInit.includes('-')) {
+      if (valInit && valInit[0] === '_') {
+        if (shouldDoClasses) {
+          classNames[keyInit] = valInit
+        } else {
+          style[keyInit] = reverseMapClassNameToValue(keyInit, valInit)
+        }
+        usedKeys[keyInit] = 1
+        continue
+      }
+    }
+
     // normalize shorthands up front
     const expandedKey = conf.shorthands[keyInit]
     if (expandedKey) {
@@ -251,6 +251,18 @@ export const getSplitStyles: StyleSplitter = (
       continue
     }
 
+    function mergeStyle(key: string, val: any) {
+      usedKeys[key] = usedKeys[key] || 1
+      if (val && val[0] === '_') {
+        classNames[key] = val
+      } else if (key in stylePropsTransform) {
+        flatTransforms ||= {}
+        flatTransforms[key] = val
+      } else {
+        style[key] = normalizeValueWithProperty(val, key)
+      }
+    }
+
     if (process.env.TAMAGUI_TARGET === 'web') {
       /**
        * Copying in the accessibility/prop handling from react-native-web here
@@ -416,6 +428,7 @@ export const getSplitStyles: StyleSplitter = (
           !isValidClassName &&
           keyInit.includes(PROP_SPLIT) &&
           validStyles[keyInit.split(PROP_SPLIT)[0]]
+
         if (isValidClassName || isMediaOrPseudo) {
           usedKeys[keyInit] = 1
           mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo)
@@ -479,13 +492,9 @@ export const getSplitStyles: StyleSplitter = (
     }
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-      if (!isServer) {
-        // eslint-disable-next-line no-console
-        console.log('expanded', expanded)
-        // eslint-disable-next-line no-console
-        console.log('usedKeys', usedKeys)
+      if (!isServer && isWeb) {
         // eslint-disable-next-line no-console
-        console.log('current', { ...style })
+        console.log('expanded', expanded, '\nusedKeys', usedKeys, '\ncurrent', { ...style })
       }
       // eslint-disable-next-line no-console
       console.groupEnd()
@@ -677,31 +686,32 @@ export const getSplitStyles: StyleSplitter = (
 
   // add in defaults if not set:
   if (parentSplitStyles) {
-    if (process.env.NODE_ENV === 'development') {
-      if (debug === 'verbose') {
-        // eslint-disable-next-line no-console
-        console.log(`  add in styled() parent styles`, { parentSplitStyles, shouldDoClasses })
-      }
-    }
     if (process.env.TAMAGUI_TARGET === 'web') {
-      for (const key in parentSplitStyles.classNames) {
-        if (key in classNames) continue
-        if (key in style) continue
-        const val = parentSplitStyles.classNames[key]
-        if (!shouldDoClasses) {
-          style[key] = reverseMapClassNameToValue(key, val)
-        } else {
+      if (shouldDoClasses) {
+        for (const key in parentSplitStyles.classNames) {
+          const val = parentSplitStyles.classNames[key]
+          if (key in style || key in classNames) continue
           classNames[key] = val
         }
       }
     }
     if (!shouldDoClasses) {
       for (const key in parentSplitStyles.style) {
-        if (key in classNames) continue
-        if (key in style) continue
+        if (key in classNames || key in style) continue
         style[key] = parentSplitStyles.style[key]
       }
     }
+    if (process.env.NODE_ENV === 'development') {
+      if (debug === 'verbose') {
+        // eslint-disable-next-line no-console
+        console.log(`  add in parent styled()`, {
+          parentSplitStyles,
+          shouldDoClasses,
+          style: { ...style },
+          classNames: { ...classNames },
+        })
+      }
+    }
   }
 
   if (process.env.TAMAGUI_TARGET === 'web') {
@@ -715,9 +725,6 @@ export const getSplitStyles: StyleSplitter = (
           addStyleToInsertRules(rulesToInsert, atomicStyle)
           mergeClassName(transforms, classNames, key, atomicStyle.identifier)
         }
-        if (!IS_STATIC) {
-          style = emptyObject
-        }
       }
     }
 

package/src/helpers/mergeProps.ts

@@ -12,16 +12,16 @@
  *   - shorthands can be expanded before merging
  */
 
-type StringRecord = Record<string, string>
+type AnyRecord = Record<string, any>
 
 export const mergeProps = (
   a: Object,
   b: Object,
   leaveOutClassNames = false,
-  inverseShorthands?: StringRecord
+  inverseShorthands?: AnyRecord
 ) => {
-  const out: StringRecord = {}
-  const outCns: StringRecord = leaveOutClassNames ? {} : (null as any)
+  const out: AnyRecord = {}
+  const outCns: AnyRecord = leaveOutClassNames ? {} : (null as any)
   for (const key in a) {
     mergeProp(out, outCns, a, b, key, leaveOutClassNames, inverseShorthands)
   }
@@ -32,13 +32,13 @@ export const mergeProps = (
 }
 
 function mergeProp(
-  out: StringRecord,
-  outCns: StringRecord,
+  out: AnyRecord,
+  outCns: AnyRecord,
   a: Object,
   b: Object | undefined,
   key: string,
   leaveOutClassNames: boolean,
-  inverseShorthands?: StringRecord
+  inverseShorthands?: AnyRecord
 ) {
   const val = a[key]
   const shorthand = inverseShorthands ? inverseShorthands[key] : null

package/src/helpers/normalizeValueWithProperty.ts

@@ -3,6 +3,8 @@
  * Copyright (c) Nicolas Gallagher licensed under the MIT license.
  */
 
+import { isWeb } from '@tamagui/constants'
+
 import { getAllSelectors } from './insertStyleRule'
 import { normalizeColor } from './normalizeColor'
 
@@ -20,9 +22,11 @@ export function normalizeValueWithProperty(value: any, property?: string): any {
   if (
     process.env.TAMAGUI_TARGET === 'web' &&
     typeof value === 'number' &&
-    (property === undefined || !unitlessNumbers[property])
+    (property === undefined || (!unitlessNumbers[property] && !stringNumbers[property]))
   ) {
     res = `${value}px`
+  } else if (isWeb && property !== undefined && stringNumbers[property]) {
+    res = `${res}`
   } else if (property && colorProps[property]) {
     res = normalizeColor(value)
     cache[value] = res
@@ -45,6 +49,10 @@ const colorProps = {
   textShadowColor: true,
 }
 
+const stringNumbers = {
+  zIndex: true,
+}
+
 const unitlessNumbers = {
   WebkitLineClamp: true,
   animationIterationCount: true,
@@ -74,7 +82,6 @@ const unitlessNumbers = {
   orphans: true,
   tabSize: true,
   widows: true,
-  zIndex: true,
   zoom: true,
   scale: true,
   scaleX: true,

package/src/helpers/useShallowSetState.tsx

@@ -1,8 +1,10 @@
 import React, { useCallback } from 'react'
 
+import { DebugProp } from '../types'
+
 export function useShallowSetState<State extends Object>(
   setter: React.Dispatch<React.SetStateAction<State>>,
-  debug?: boolean | 'verbose',
+  debug?: DebugProp,
   debugName?: string
 ) {
   return useCallback(

package/src/hooks/useMedia.tsx

@@ -1,5 +1,5 @@
 import { useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { MutableRefObject, useEffect, useMemo, useState } from 'react'
+import { MutableRefObject, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 
 import { getConfig } from '../config'
 import { createProxy } from '../helpers/createProxy'
@@ -54,15 +54,12 @@ export function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener)
 
 export const mediaQueryConfig: MediaQueries = {}
 
-export const getMedia = () => {
-  return mediaState
-}
+export const getMedia = () => mediaState
 
 // for SSR capture it at time of startup
-let curState: MediaQueryState
 let initState: MediaQueryState
 export const getInitialMediaState = () => {
-  return (getConfig().disableSSR ? curState : initState) || {}
+  return (getConfig().disableSSR ? mediaState : initState) || {}
 }
 
 let mediaKeysOrdered: string[]
@@ -79,8 +76,8 @@ export const configureMedia = (config: TamaguiInternalConfig) => {
     mediaState[key] = mediaQueryDefaultActive?.[key] || false
   }
   Object.assign(mediaQueryConfig, media)
-  curState = { ...mediaState }
-  initState = curState
+  initState = { ...mediaState }
+  updateCurrentState()
   mediaKeysOrdered = Object.keys(media)
   if (config.disableSSR) {
     setupMediaListeners()
@@ -126,7 +123,7 @@ function setupMediaListeners() {
       const next = !!getMatch().matches
       if (next === mediaState[key]) return
       mediaState[key] = next
-      curState = { ...mediaState }
+      updateCurrentState()
       const cur = listeners[key]
       if (cur?.size) {
         cur.forEach((cb) => cb(next))
@@ -143,45 +140,56 @@ export function useMediaListeners(config: TamaguiInternalConfig) {
   }, [])
 }
 
+const nextTick = process.nextTick || setImmediate
+const currentStateListeners = new Set<any>()
+let isUpdating = false
+function updateCurrentState() {
+  if (isUpdating) return
+  isUpdating = true
+  nextTick(() => {
+    currentStateListeners.forEach((cb) => cb(mediaState))
+    isUpdating = false
+  })
+}
+function subscribe(subscriber: any) {
+  currentStateListeners.add(subscriber)
+  return () => currentStateListeners.delete(subscriber)
+}
+
+type MediaKeysState = {
+  [key: string]: any
+}
+
 export function useMedia(): {
   [key in MediaQueryKey]: boolean
 } {
-  const keys = useSafeRef({} as Record<string, boolean>)
-  const [state, setState] = useState<MediaQueryState>(() => getMediaState(initState || {}, keys))
+  const keys = useSafeRef<MediaKeysState>({ prev: initState })
 
-  function updateState() {
-    setState((prev) => {
-      for (const key in keys.current) {
-        if (prev[key] !== mediaState[key]) {
-          return getMediaState({ ...mediaState }, keys)
-        }
+  const state = useSyncExternalStore<MediaQueryState>(
+    subscribe,
+    () => {
+      const { prev, ...curKeys } = keys.current
+      const shouldUpdate = !prev || Object.keys(curKeys).some((k) => mediaState[k] !== prev[k])
+      if (shouldUpdate) {
+        const next = { ...mediaState }
+        keys.current.prev = next
+        return next
       }
       return prev
-    })
-  }
-
-  useIsomorphicLayoutEffect(() => {
-    updateState()
-    const disposers = Object.keys(keys.current).map((key) =>
-      addMediaQueryListener(key, updateState)
-    )
-    return () => {
-      disposers.forEach((cb) => cb())
-    }
-  }, [keys.current])
-
-  return state
-}
-
-function getMediaState(state: MediaQueryState, keys: MutableRefObject<Record<string, boolean>>) {
-  return new Proxy(state, {
-    get(_, key: string) {
-      if (!keys.current[key]) {
-        keys.current[key] = true
-      }
-      return Reflect.get(state, key)
     },
-  })
+    () => initState
+  )
+
+  return useMemo(() => {
+    return new Proxy(state, {
+      get(_, key: string) {
+        if (!keys.current[key]) {
+          keys.current[key] = true
+        }
+        return Reflect.get(state, key)
+      },
+    })
+  }, [state])
 }
 
 /**