feat(ui): use native useEffectEvent if available

packages/ui/src/hooks/useEffectEvent.ts

@@ -2,7 +2,7 @@
 
 /**
 
-Taken and modified from https://github.com/bluesky-social/social-app/blob/ce0bf867ff3b50a495d8db242a7f55371bffeadc/src/lib/hooks/useNonReactiveCallback.ts
+Polyfill taken and modified from https://github.com/bluesky-social/social-app/blob/ce0bf867ff3b50a495d8db242a7f55371bffeadc/src/lib/hooks/useNonReactiveCallback.ts
 
 Copyright 2023–2025 Bluesky PBC
 
@@ -13,7 +13,7 @@ The above copyright notice and this permission notice shall be included in all c
 THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useCallback, useInsertionEffect, useRef } from 'react'
+import React, { useCallback, useInsertionEffect, useRef } from 'react'
 
 // This should be used sparingly. It erases reactivity, i.e. when the inputs
 // change, the function itself will remain the same. This means that if you
@@ -23,14 +23,20 @@ import { useCallback, useInsertionEffect, useRef } from 'react'
 //
 // Also, you should avoid calling the returned function during rendering
 // since the values captured by it are going to lag behind.
-// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-export function useEffectEvent<T extends Function>(fn: T): T {
-  const ref = useRef(fn)
-  useInsertionEffect(() => {
-    ref.current = fn
-  }, [fn])
-  return useCallback((...args: any) => {
-    const latestFn = ref.current
-    return latestFn(...args)
-  }, []) as unknown as T
-}
+
+export const useEffectEvent =
+  'useEffectEvent' in React && typeof React.useEffectEvent === 'function'
+    ? // useEffectEvent is available in Next.js 16 / newer versions of React
+      React.useEffectEvent
+    : // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+      <T extends Function>(fn: T): T => {
+        // useEffectEvent is not available in older versions of React, so we need to polyfill it
+        const ref = useRef(fn)
+        useInsertionEffect(() => {
+          ref.current = fn
+        }, [fn])
+        return useCallback((...args: any) => {
+          const latestFn = ref.current
+          return latestFn(...args)
+        }, []) as unknown as T
+      }