javascript - 使用 eslint exhaustive-deps react 订阅/取消订阅的 useEffect 依赖项

Question

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

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 has missing dependencies: clearWatch and startWatch. Either include them or remove the dependency 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 source code ，您可以看到这些函数不是使用 useCallback 创建的，这意味着它们会在调用 Hook 时重新生成。

您可以将对函数的引用存储在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>
}