useEffectEvent

code:ts

const onConnected = useEffectEvent(() => {

showNotification('Connected!', theme);

});

ここで、onConnected はエフェクトイベント (Effect Event) と呼ばれるものです。これはエフェクトロジックの一部でありながら、むしろイベントハンドラに近い動作をします。この中のロジックはリアクティブではなく、常に props と state の最新の値を「見る」ことができます。

わからん、違うかも

v18時点ではexperimental

code:ts

const onSomething = useEffectEvent(callback)

code:ts

export function useEffectEvent<T extends (...args: any[]) => any>(fn: T) {

const ref = React.useRef<T | null>(null)

React.useLayoutEffect(() => {

ref.current = fn

return React.useCallback((...args: Parameters<T>): ReturnType<T> => {

const f = ref.current

return f!(...args)

}, [])

}