title: React useEffect dependencies for subscribe/unsubscribe with eslint exhaustive-deps
body: <p>I have a <code>useEffect</code> hook that should subscribe to geolocation updates when the component appears, and then unsubscribe when the component disappears. So I pass <code>[]</code> as the effect dependencies since I only want this to run on mount/unmount.</p>
  
  <pre><code>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(() =&gt; {
      startWatch()
      return clearWatch
    }, [])
  
    return &lt;svg&gt;{/* ... */}&lt;/svg&gt;
  }
  </code></pre>
  
  <p>Which causes eslint to warn:</p>
  
  <blockquote>
    <p>React Hook useEffect has missing dependencies: <code>clearWatch</code> and <code>startWatch</code>. Either include them or remove the dependency <code>array.eslint(react-hooks/exhaustive-deps)</code></p>
  </blockquote>
  
  <p>So I changed it to this:</p>
  
  <pre><code>  useEffect(() =&gt; {
      startWatch()
      return clearWatch
    }, [startWatch, clearWatch])
  </code></pre>
  
  <p>Which causes an infinite render loop.</p>
  
  <p>I'm guessing the infinite loop is caused by the <code>@ionic/react-hooks/geolocation</code> library which is creating new functions every time <code>useWatchPosition()</code> is called, making the dependencies look stale.</p>
  
  <p>So should I just disable the check for this line via:</p>
  
  <pre><code>// eslint-disable-next-line react-hooks/exhaustive-deps
  </code></pre>
  
  <p>Or is there some way I'm missing to do the right thing here?</p>