From adb990460e4d6e4b852bffb4972c2f36558f7e39 Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Wed, 21 Jan 2026 10:05:59 -0800 Subject: [PATCH] commit --- packages/ui/src/hooks/useEffectEvent.ts | 32 +++++++++++++++---------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/packages/ui/src/hooks/useEffectEvent.ts b/packages/ui/src/hooks/useEffectEvent.ts index cc3d8cb932c..513a1d71315 100644 --- a/packages/ui/src/hooks/useEffectEvent.ts +++ b/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(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 + (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 + }