@tamagui/web 2.3.3 → 2.4.0-1783099846627

package/src/helpers/pointerEvents.native.ts

@@ -25,13 +25,20 @@ export function usePointerEvents(props: any, viewProps: any) {
     onPointerEnter ||
     onPointerLeave
 
-  // track if pointer is currently inside bounds (for enter/leave)
-  const isInsideRef = useRef(false)
-  const layoutRef = useRef({ width: 0, height: 0 })
-  // track if pointer is captured (for move events outside bounds)
-  const isCapturedRef = useRef(false)
+  // single ref-bag (was three separate useRef slots) — one hook slot per
+  // component instead of three. isInside = pointer within bounds (enter/leave),
+  // layout = measured bounds, isCaptured = setPointerCapture state for moves.
+  const ref = useRef<{
+    isInside: boolean
+    layout: { width: number; height: number }
+    isCaptured: boolean
+  } | null>(null)
+  if (!ref.current) {
+    ref.current = { isInside: false, layout: { width: 0, height: 0 }, isCaptured: false }
+  }
 
   if (!hasPointerEvents) return
+  const bag = ref.current
 
   // create normalized event with setPointerCapture support
   const createNormalizedEvent = (e: any) => {
@@ -49,10 +56,10 @@ export function usePointerEvents(props: any, viewProps: any) {
       nativeEvent: touch,
       target: {
         setPointerCapture: (_pointerId: number) => {
-          isCapturedRef.current = true
+          bag.isCaptured = true
         },
         releasePointerCapture: (_pointerId: number) => {
-          isCapturedRef.current = false
+          bag.isCaptured = false
         },
       },
     }
@@ -69,7 +76,7 @@ export function usePointerEvents(props: any, viewProps: any) {
   // pointer up
   if (onPointerUp) {
     viewProps.onTouchEnd = composeEventHandlers(viewProps.onTouchEnd, (e: any) => {
-      isCapturedRef.current = false // auto-release on up
+      bag.isCaptured = false // auto-release on up
       onPointerUp(createNormalizedEvent(e))
     })
   }
@@ -78,12 +85,12 @@ export function usePointerEvents(props: any, viewProps: any) {
   if (onPointerMove) {
     viewProps.onTouchMove = composeEventHandlers(viewProps.onTouchMove, (e: any) => {
       const { locationX, locationY } = e.nativeEvent
-      const { width, height } = layoutRef.current
+      const { width, height } = bag.layout
       const isInBounds =
         locationX >= 0 && locationX <= width && locationY >= 0 && locationY <= height
 
       // fire if captured OR in bounds (matches web behavior)
-      if (isCapturedRef.current || isInBounds) {
+      if (bag.isCaptured || isInBounds) {
         onPointerMove(createNormalizedEvent(e))
       }
     })
@@ -92,7 +99,7 @@ export function usePointerEvents(props: any, viewProps: any) {
   // pointer cancel
   if (onPointerCancel) {
     viewProps.onTouchCancel = composeEventHandlers(viewProps.onTouchCancel, (e: any) => {
-      isCapturedRef.current = false
+      bag.isCaptured = false
       onPointerCancel(createNormalizedEvent(e))
     })
   }
@@ -101,7 +108,7 @@ export function usePointerEvents(props: any, viewProps: any) {
   if (onPointerEnter || onPointerLeave || onPointerMove) {
     // track layout for bounds checking
     viewProps.onLayout = composeEventHandlers(viewProps.onLayout, (e: any) => {
-      layoutRef.current = {
+      bag.layout = {
         width: e.nativeEvent.layout.width,
         height: e.nativeEvent.layout.height,
       }
@@ -112,9 +119,9 @@ export function usePointerEvents(props: any, viewProps: any) {
   if (onPointerEnter) {
     viewProps.onTouchStart = composeEventHandlers(viewProps.onTouchStart, (e: any) => {
       const { locationX, locationY } = e.nativeEvent
-      const { width, height } = layoutRef.current
+      const { width, height } = bag.layout
       if (locationX >= 0 && locationX <= width && locationY >= 0 && locationY <= height) {
-        isInsideRef.current = true
+        bag.isInside = true
         onPointerEnter(createNormalizedEvent(e))
       }
     })
@@ -124,18 +131,18 @@ export function usePointerEvents(props: any, viewProps: any) {
   if (onPointerLeave) {
     viewProps.onTouchMove = composeEventHandlers(viewProps.onTouchMove, (e: any) => {
       const { locationX, locationY } = e.nativeEvent
-      const { width, height } = layoutRef.current
+      const { width, height } = bag.layout
       const isInside =
         locationX >= 0 && locationX <= width && locationY >= 0 && locationY <= height
-      if (isInsideRef.current && !isInside) {
-        isInsideRef.current = false
+      if (bag.isInside && !isInside) {
+        bag.isInside = false
         onPointerLeave(createNormalizedEvent(e))
       }
     })
 
     viewProps.onTouchEnd = composeEventHandlers(viewProps.onTouchEnd, (e: any) => {
-      if (isInsideRef.current) {
-        isInsideRef.current = false
+      if (bag.isInside) {
+        bag.isInside = false
         onPointerLeave(createNormalizedEvent(e))
       }
     })

package/src/hooks/useComponentState.ts

@@ -1,5 +1,5 @@
 import { getPlatformDriver, isServer, isWeb } from '@tamagui/constants'
-import { useCreateShallowSetState } from '@tamagui/is-equal-shallow'
+import { mergeIfNotShallowEqual } from '@tamagui/is-equal-shallow'
 import { useDidFinishSSR, useIsClientOnly } from '@tamagui/use-did-finish-ssr'
 import { useRef, useState } from 'react'
 import { getSetting } from '../config'
@@ -176,7 +176,44 @@ export const useComponentState = (
 
   const groupName = props.group as any as string | undefined
 
-  const setStateShallow = useCreateShallowSetState(setState, props.debug)
+  // hoisted shallow-set closure: created once per component instance and
+  // reused every render. drops the useCallback hook that useCreateShallowSetState
+  // would otherwise add. setState from useState is stable per instance so we
+  // can safely capture it. debug is read off stateRef at call time.
+  //
+  // important: this lives on `baseSetStateShallow`, not `setStateShallow`.
+  // createComponent's avoidReRenders path overwrites `stateRef.current.setStateShallow`
+  // with an emitter wrapper and captures this base as its real-re-render escape hatch.
+  // if the base shared the `setStateShallow` field, on the 2nd+ render this hook would
+  // read back the wrapper, the wrapper's escape hatch would point at itself, and a real
+  // re-render (e.g. unmounted 'should-enter' -> false) would never reach React, leaving
+  // enter animations stuck at opacity 0.
+  if (!stateRef.current.baseSetStateShallow) {
+    const r = stateRef.current
+    r.baseSetStateShallow = (stateOrGetState: any) => {
+      setState((prev: any) => {
+        const next =
+          typeof stateOrGetState === 'function' ? stateOrGetState(prev) : stateOrGetState
+        const update = mergeIfNotShallowEqual(prev, next)
+        if (process.env.NODE_ENV === 'development') {
+          const dbg = (r as any).__debug
+          if (dbg && update !== prev) {
+            console.groupCollapsed(`setStateShallow CHANGE`, '=>', update)
+            console.info(`previously`, prev)
+            console.trace()
+            console.groupEnd()
+          }
+        }
+        return update
+      })
+    }
+  }
+  if (process.env.NODE_ENV === 'development') {
+    ;(stateRef.current as any).__debug = props.debug
+  }
+  const setStateShallow = stateRef.current.baseSetStateShallow!
+  if (process.env.NODE_ENV === 'development' && globalThis.time)
+    globalThis.time`state-useCreateShallowSetState`
 
   // set enter/exit variants onto our new props object
   if (presenceState && isAnimated && isHydrated && staticConfig.variants) {

package/src/hooks/useMedia.tsx

@@ -1,5 +1,5 @@
 import { isServer, isWeb } from '@tamagui/constants'
-import { useRef, useSyncExternalStore } from 'react'
+import { useEffect, useReducer, useRef } from 'react'
 import { getSetting } from '../config'
 import { resetMediaStyleCache } from '../helpers/createMediaStyle'
 import { matchMedia } from '../helpers/matchMedia'
@@ -66,6 +66,8 @@ export const configureMedia = (config: TamaguiInternalConfig) => {
   mediaVersion++
   // reset cached media style prefixes/selectors so they get recalculated with new key order
   resetMediaStyleCache()
+  // touch-tracker getter object depends on the current media key set
+  resetMediaTouchTracker()
   for (const key in media) {
     getMedia()[key] = mediaQueryDefaultActive?.[key] || false
     mediaKeys.add(`$${key}`)
@@ -136,6 +138,47 @@ type MediaState = {
 
 const States = new WeakMap<any, MediaState>()
 
+// shared "touch tracker" prototype: one object whose enumerable getter
+// properties are pre-defined for every configured media key. Hermes inlines
+// getter calls; the old `new Proxy(state, { get })` path forced an interpreted
+// trap on every access — the dominant per-component cost in benchmarks. Each
+// component owns just an Object.create(proto) with a Symbol-keyed slot
+// pointing at its tracking set + current snapshot.
+type MediaRefSlot = {
+  proxyTarget: MediaQueryState
+  keys: Set<string>
+}
+let touchTrackerProto: object | null = null
+const refSlot = Symbol('mediaRefSlot')
+
+function buildTouchTrackerProto(): object {
+  const proto: PropertyDescriptorMap = {}
+  for (const fullKey of mediaKeys) {
+    const key = fullKey[0] === '$' ? fullKey.slice(1) : fullKey
+    proto[key] = {
+      enumerable: true,
+      configurable: true,
+      get(this: { [refSlot]: MediaRefSlot }) {
+        const slot = this[refSlot]
+        if (!disableMediaTouch) {
+          slot.keys.add(key)
+        }
+        return slot.proxyTarget[key]
+      },
+    }
+  }
+  return Object.create(null, proto)
+}
+
+function getTouchTrackerProto(): object {
+  if (!touchTrackerProto) touchTrackerProto = buildTouchTrackerProto()
+  return touchTrackerProto
+}
+
+function resetMediaTouchTracker() {
+  touchTrackerProto = null
+}
+
 export function setMediaShouldUpdate(
   ref: any,
   enabled?: boolean,
@@ -165,38 +208,46 @@ export function useMedia(
 ): UseMediaState {
   'use no memo'
 
-  const componentState = componentContext ? States.get(componentContext) : null
-
-  const internalRef = useRef<{
+  type MediaRef = {
     keys: Set<string>
     lastState: MediaQueryState
     pendingState?: MediaQueryState
-  }>(null)
-  if (!internalRef.current) {
-    internalRef.current = {
-      keys: new Set(),
-      lastState: getMedia(),
-    }
-  }
-
-  // reset on next render
-  if (internalRef.current.pendingState) {
-    internalRef.current.lastState = internalRef.current.pendingState
-    internalRef.current.pendingState = undefined
-  }
-
-  const { keys } = internalRef.current
-
-  // clear each render to track only rendered touched keys
-  if (keys.size) {
-    keys.clear()
+    renderVersion: number
+    unsubscribe?: () => void
+    // stable per-component closures + reusable Proxy. allocating new ones each
+    // render (via useSyncExternalStore + `new Proxy(state, ...)`) was a real
+    // per-component-per-render cost; we hold one Proxy whose target is swapped
+    // by mutating `proxyTarget` and re-reading it in the get trap.
+    proxyTarget: MediaQueryState
+    proxy: UseMediaState
+    getSnapshot: () => MediaQueryState
+    componentContext?: ComponentContextI
+    debug?: DebugProp
   }
 
-  const state = useSyncExternalStore(
-    subscribe,
-    () => {
-      const curKeys = componentState?.keys || keys
-      const { lastState, pendingState } = internalRef.current!
+  const internalRef = useRef<MediaRef | null>(null)
+  if (!internalRef.current) {
+    const initial = getMedia()
+    const r: MediaRef = {
+      keys: new Set<string>(),
+      lastState: initial,
+      renderVersion: 0,
+      proxyTarget: initial,
+      proxy: undefined as unknown as UseMediaState,
+      getSnapshot: undefined as unknown as () => MediaQueryState,
+      componentContext,
+      debug,
+    }
+    // proxy → Object.create(getterProto) with a Symbol slot. Per-key get is a
+    // monomorphic getter call (Hermes-fast) instead of a Proxy trap.
+    const tracker = Object.create(getTouchTrackerProto())
+    tracker[refSlot] = { proxyTarget: initial, keys: r.keys } as MediaRefSlot
+    r.proxy = tracker as UseMediaState
+    r.getSnapshot = () => {
+      const curKeys = r.componentContext
+        ? States.get(r.componentContext)?.keys || r.keys
+        : r.keys
+      const { lastState, pendingState } = r
 
       if (!curKeys.size) {
         return lastState
@@ -205,38 +256,92 @@ export function useMedia(
       const ms = getMedia()
       for (const key of curKeys) {
         if (ms[key] !== (pendingState || lastState)[key]) {
-          if (process.env.NODE_ENV === 'development' && debug) {
+          if (process.env.NODE_ENV === 'development' && r.debug) {
             console.warn(`useMedia() ✍️`, key, lastState[key], '=>', ms[key])
           }
 
           // in emitter mode (no-rerender) avoid changing state, instead emit
-          if (componentContext?.mediaEmit) {
-            componentContext.mediaEmit(ms)
-            internalRef.current!.pendingState = ms
+          if (r.componentContext?.mediaEmit) {
+            r.componentContext.mediaEmit(ms)
+            r.pendingState = ms
             return lastState
           }
 
-          internalRef.current!.lastState = ms
+          r.lastState = ms
 
           return ms
         }
       }
 
       return lastState
-    },
-    getServerSnapshot
-  )
+    }
+    internalRef.current = r
+  } else {
+    // refresh per-render inputs the closures read through the ref
+    internalRef.current.componentContext = componentContext
+    internalRef.current.debug = debug
+  }
 
-  return new Proxy(state, {
-    get(_, key) {
-      if (!disableMediaTouch && typeof key === 'string') {
-        keys.add(key)
+  const ref = internalRef.current
+  ref.renderVersion++
+
+  // reset on next render
+  if (ref.pendingState) {
+    ref.lastState = ref.pendingState
+    ref.pendingState = undefined
+  }
+
+  // clear each render to track only rendered touched keys
+  if (ref.keys.size) {
+    ref.keys.clear()
+  }
+
+  // manual subscription (same shape as useThemeStateSubscribed): same
+  // granular bailout via getSnapshot returning the same MediaQueryState ref
+  // when none of the component's touched keys changed, but fewer
+  // React-internal hook slots on Hermes than useSyncExternalStore.
+  const [, forceUpdate] = useReducer(incReducer, 0)
+  const state = isServer ? initState : ref.getSnapshot()
+  ref.proxyTarget = state
+  ;(ref.proxy as any)[refSlot].proxyTarget = state
+
+  useEffect(() => {
+    const renderVersion = ref.renderVersion
+    const shouldSubscribe =
+      !ref.componentContext || !!States.get(ref.componentContext)?.enabled
+
+    if (shouldSubscribe) {
+      if (!ref.unsubscribe) {
+        ref.unsubscribe = subscribe(() => {
+          const next = ref.getSnapshot()
+          if (next !== ref.proxyTarget) {
+            ref.proxyTarget = next
+            ;(ref.proxy as any)[refSlot].proxyTarget = next
+            forceUpdate()
+          }
+        })
       }
-      return Reflect.get(state, key)
-    },
+    } else if (ref.unsubscribe) {
+      ref.unsubscribe()
+      ref.unsubscribe = undefined
+    }
+
+    return () => {
+      // react runs passive cleanup before the next effect as well as on unmount.
+      // a newer render bumps renderVersion before that cleanup, so equality here
+      // means this is the final unmount cleanup.
+      if (ref.renderVersion === renderVersion) {
+        ref.unsubscribe?.()
+        ref.unsubscribe = undefined
+      }
+    }
   })
+
+  return ref.proxy
 }
 
+const incReducer = (c: number): number => c + 1
+
 const getServerSnapshot = () => initState
 
 let disableMediaTouch = false

package/src/hooks/useTheme.tsx

@@ -1,10 +1,15 @@
-import { useRef } from 'react'
+import { useRef, type MutableRefObject } from 'react'
 import type { ThemeParsed, ThemeState, UseThemeWithStateProps } from '../types'
 import { getThemeProxied, type ThemeProxied } from './getThemeProxied'
 import { useThemeState } from './useThemeState'
 
 const EMPTY = {}
 
+type KeysBag = {
+  keys: MutableRefObject<Set<string> | null>
+  schemeKeys: MutableRefObject<Set<string> | null>
+}
+
 export const useTheme = () => {
   'use no memo'
 
@@ -20,13 +25,30 @@ export type ThemeWithState = [ThemeParsed, ThemeState]
  */
 export const useThemeWithState = (
   props: UseThemeWithStateProps,
-  isRoot = false
+  isRoot = false,
+  // <Theme> components push their themeState.id into ThemeStateContext,
+  // so their descendants subscribe under this id; <Theme> needs to schedule
+  // descendant updates when its propsKey changes. Leaf styled components
+  // (createComponent, useProps, useTheme, animation hooks) do NOT push a
+  // context — listenersByParent[componentId] is always empty — so the
+  // schedule-update effect is a no-op for them and can be skipped to save
+  // one hook slot per styled component on mount. Theme.tsx passes true.
+  forThemeView = false
 ): ThemeWithState => {
   'use no memo'
 
-  const keys = useRef<Set<string> | null>(null)
-  const schemeKeys = useRef<Set<string> | null>(null)
-  const themeState = useThemeState(props, isRoot, keys, schemeKeys)
+  // single useRef holding both keys + schemeKeys; saves one hook slot per
+  // component vs separate useRef calls. these still look like MutableRefObject
+  // to getThemeProxied which only reads/writes `.current`.
+  const bag = useRef<KeysBag | null>(null)
+  if (!bag.current) {
+    bag.current = {
+      keys: { current: null },
+      schemeKeys: { current: null },
+    }
+  }
+  const { keys, schemeKeys } = bag.current
+  const themeState = useThemeState(props, isRoot, keys, schemeKeys, forThemeView)
 
   if (process.env.NODE_ENV === 'development') {
     if (!props.passThrough && !themeState?.theme) {