为订阅/取消订阅响应useEffect依赖关系，使用eslint详尽的-deps

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>
}

这会使埃林特发出警告：

React 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

阅读useWatchPosition 源代码，您可以看到函数不是用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>
}