使用 eslint 详尽的deps 反应订阅/取消订阅的 useEffect 依赖项

Question

我有一个useEffect 钩子，它应该在组件出现时订阅地理位置更新，然后在组件消失时取消订阅。所以我将[] 作为效果依赖项传递，因为我只希望它在挂载/卸载时运行。

import { useWatchPosition } from "@ionic/react-hooks/geolocation"
import React, { useEffect } from "react"

function SiteMap() {
  const { currentPosition, startWatch, clearWatch } = useWatchPosition()

  // Subscribe/Unsubscribe to geo location on component mount/unmount.
  useEffect(() => {
    startWatch()
    return clearWatch
  }, [])

  return <svg>{/* ... */}</svg>
}

导致 eslint 发出警告的原因：

React Hook useEffect 缺少依赖项：clearWatch 和 startWatch。要么包含它们，要么移除依赖array.eslint(react-hooks/exhaustive-deps)

所以我把它改成了这样：

  useEffect(() => {
    startWatch()
    return clearWatch
  }, [startWatch, clearWatch])

这会导致无限渲染循环。

我猜无限循环是由 @ionic/react-hooks/geolocation 库引起的，该库在每次调用 useWatchPosition() 时都会创建新函数，从而使依赖项看起来陈旧。

所以我应该通过以下方式禁用对这一行的检查：

// eslint-disable-next-line react-hooks/exhaustive-deps

或者有什么方法让我在这里做正确的事情吗？

Answer 1

阅读useWatchPositionsource code，可以看到函数不是用useCallback创建的，这意味着每当调用钩子时都会重新生成它们。

您可以在ref 中存储对函数的引用，并使用ref.current 调用函数：

function SiteMap() {
  const { currentPosition, startWatch, clearWatch } = useWatchPosition()
  
  const startWatchRef = useRef(startWatch)
  const clearWatchRef = useRef()

  useEffect(() => {
    clearWatch.current = clearWatch // the updated clearWatch
  })

  // Subscribe/Unsubscribe to geo location on component mount/unmount.
  useEffect(() => {
    startWatchRef.current()
            
    return () => clearWatchRef.current()
  }, [])

  return <svg>{/* ... */}</svg>
}