react hooks：如何处理共同依赖的useCallbacks

Question

react钩子的短子喜欢对DependencyList严格。这将导致以下两种情况，其中两个事件处理程序相互依赖。由于addEventListener我已经注册了函数，所以我知道它们是否会更改，这会导致内存泄漏，因此，很容易做的就是清空依赖项列表，但是按照linter的规则处理该问题的正确方法是什么？

const onMouseMove = useCallback((e) => {
  if (!isSwipe(e)) {
    onMouseUp(e)
  }
}, [onMouseUp])

const onMouseUp = useCallback((e) => {
  document.removeEventListener('mousemove', onMouseMove)
}, [onMouseMove])

Answer 1

经过一些研究，看起来（useCallback() 在实践中经常无效）的解决方案也解决了这个问题。总体思路是记住一个指向指向最新函数的 ref 的函数。

这是一个肮脏的黑客行为，也可能会在并发模式下导致问题，但目前，这是 facebook 推荐的：How to read an经常变化的值从 useCallback

const useEventCallback = (fn) => {
    const ref = useRef(fn)
    useEffect(() => {
        ref.current = fn
    })
    return useCallback((...args) => {
        ref.current(...args)
    }, [ref])
}

const onMouseMove = useEventCallback((e) => {
  if (!isSwipe(e)) {
    onMouseUp(e)
  }
})

const onMouseUp = useEventCallback((e) => {
  document.removeEventListener('mousemove', onMouseMove)
})