refactor: use useEvent instead of useLatestValue

Not really necessary, just cleaner.

packages/@headlessui-react/src/components/transitions/transition.tsx

@@ -30,6 +30,7 @@ import { useLatestValue } from '../../hooks/use-latest-value'
 import { useServerHandoffComplete } from '../../hooks/use-server-handoff-complete'
 import { useSyncRefs } from '../../hooks/use-sync-refs'
 import { useTransition } from '../../hooks/use-transition'
+import { useEvent } from '../../hooks/use-event'
 
 type ID = ReturnType<typeof useId>
 
@@ -98,8 +99,8 @@ function useParentNesting() {
 
 interface NestingContextValues {
   children: MutableRefObject<{ id: ID; state: TreeStates }[]>
-  register: MutableRefObject<(id: ID) => () => void>
-  unregister: MutableRefObject<(id: ID, strategy?: RenderStrategy) => void>
+  register: (id: ID) => () => void
+  unregister: (id: ID, strategy?: RenderStrategy) => void
 }
 
 let NestingContext = createContext<NestingContextValues | null>(null)
@@ -117,7 +118,7 @@ function useNesting(done?: () => void) {
   let transitionableChildren = useRef<NestingContextValues['children']['current']>([])
   let mounted = useIsMounted()
 
-  let unregister = useLatestValue((childId: ID, strategy = RenderStrategy.Hidden) => {
+  let unregister = useEvent((childId: ID, strategy = RenderStrategy.Hidden) => {
     let idx = transitionableChildren.current.findIndex(({ id }) => id === childId)
     if (idx === -1) return
 
@@ -137,15 +138,15 @@ function useNesting(done?: () => void) {
     })
   })
 
-  let register = useLatestValue((childId: ID) => {
+  let register = useEvent((childId: ID) => {
     let child = transitionableChildren.current.find(({ id }) => id === childId)
     if (!child) {
       transitionableChildren.current.push({ id: childId, state: TreeStates.Visible })
     } else if (child.state !== TreeStates.Visible) {
       child.state = TreeStates.Visible
     }
 
-    return () => unregister.current(childId, RenderStrategy.Unmount)
+    return () => unregister(childId, RenderStrategy.Unmount)
   })
 
   return useMemo(
@@ -224,13 +225,13 @@ let TransitionChild = forwardRefWithAs(function TransitionChild<
     // transitioning ourselves. Otherwise we would unmount before the transitions are finished.
     if (!transitionInFlight.current) {
       setState(TreeStates.Hidden)
-      unregister.current(id)
+      unregister(id)
     }
   })
 
   useEffect(() => {
     if (!id) return
-    return register.current(id)
+    return register(id)
   }, [register, id])
 
   useEffect(() => {
@@ -245,8 +246,8 @@ let TransitionChild = forwardRefWithAs(function TransitionChild<
     }
 
     match(state, {
-      [TreeStates.Hidden]: () => unregister.current(id),
-      [TreeStates.Visible]: () => register.current(id),
+      [TreeStates.Hidden]: () => unregister(id),
+      [TreeStates.Visible]: () => register(id),
     })
   }, [state, id, register, unregister, show, strategy])
 
@@ -290,7 +291,7 @@ let TransitionChild = forwardRefWithAs(function TransitionChild<
         // When we don't have children anymore we can safely unregister from the parent and hide
         // ourselves.
         setState(TreeStates.Hidden)
-        unregister.current(id)
+        unregister(id)
       }
     }),
   })

packages/@headlessui-react/src/hooks/use-outside-click.ts

@@ -1,6 +1,6 @@
 import { MutableRefObject, useRef } from 'react'
 import { microTask } from '../utils/micro-task'
-import { useLatestValue } from './use-latest-value'
+import { useEvent } from './use-event'
 import { useWindowEvent } from './use-window-event'
 
 type Container = MutableRefObject<HTMLElement | null> | HTMLElement | null
@@ -18,7 +18,7 @@ export function useOutsideClick(
   features: Features = Features.None
 ) {
   let called = useRef(false)
-  let handler = useLatestValue((event: MouseEvent | PointerEvent) => {
+  let handler = useEvent((event: MouseEvent | PointerEvent) => {
     if (called.current) return
     called.current = true
     microTask(() => {
@@ -77,6 +77,6 @@ export function useOutsideClick(
     return cb(event, target)
   })
 
-  useWindowEvent('pointerdown', (...args) => handler.current(...args))
-  useWindowEvent('mousedown', (...args) => handler.current(...args))
+  useWindowEvent('pointerdown', handler)
+  useWindowEvent('mousedown', handler)
 }

packages/@headlessui-react/src/hooks/use-transition.ts

@@ -5,6 +5,7 @@ import { disposables } from '../utils/disposables'
 import { match } from '../utils/match'
 
 import { useDisposables } from './use-disposables'
+import { useEvent } from './use-event'
 import { useIsMounted } from './use-is-mounted'
 import { useIsoMorphicEffect } from './use-iso-morphic-effect'
 import { useLatestValue } from './use-latest-value'
@@ -46,15 +47,15 @@ export function useTransition({
 
   let latestDirection = useLatestValue(direction)
 
-  let beforeEvent = useLatestValue(() => {
+  let beforeEvent = useEvent(() => {
     return match(latestDirection.current, {
       enter: () => events.current.beforeEnter(),
       leave: () => events.current.beforeLeave(),
       idle: () => {},
     })
   })
 
-  let afterEvent = useLatestValue(() => {
+  let afterEvent = useEvent(() => {
     return match(latestDirection.current, {
       enter: () => events.current.afterEnter(),
       leave: () => events.current.afterLeave(),
@@ -73,7 +74,7 @@ export function useTransition({
 
     dd.dispose()
 
-    beforeEvent.current()
+    beforeEvent()
 
     onStart.current(latestDirection.current)
 
@@ -83,7 +84,7 @@ export function useTransition({
 
         match(reason, {
           [Reason.Ended]() {
-            afterEvent.current()
+            afterEvent()
             onStop.current(latestDirection.current)
           },
           [Reason.Cancelled]: () => {},