<p dir="auto"><strong><code class="notranslate">eslint-plugin-react-hooks</code> version: <code class="notranslate">4.2.0</code></strong></p>
<hr>
<p dir="auto">When calling a function within <code class="notranslate">useEffect</code> where the function exists directly on an object and the function is included in the effect's dependency array, the <code class="notranslate">react-hooks/exhaustive-dep</code> ESLint rule is triggered. I'm wondering whether this is a false positive, or if there is actually a valid reason for this ESLint rule to be triggered in this scenario.</p>
<p dir="auto">Please let me know if this has already been answered/explained elsewhere;  I tried searching for this problem and couldn't find anything about it!</p>
<p dir="auto">It's also worth noting that I found this out when trying to call <a href="https://react-query.tanstack.com/reference/useMutation" rel="nofollow"><code class="notranslate">react-query</code> <code class="notranslate">useMutation</code> <code class="notranslate">mutateAsync</code></a> within a <code class="notranslate">useEffect</code> call. As the return value of <code class="notranslate">useMutation</code> is not referentially stable (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="814565091" data-permission-text="Title is private" data-url="https://github.com/TanStack/query/issues/1858" data-hovercard-type="issue" data-hovercard-url="/TanStack/query/issues/1858/hovercard" href="https://github.com/TanStack/query/issues/1858">TanStack/query#1858</a>), including the whole object in the dependency array isn't feasible, as it causes the effect to fire more than it should. However, as mentioned in that linked issue, the "functions / objects on the returned object are referentially stable", which means that including <code class="notranslate">x.mutateAsync</code> (where <code class="notranslate">x</code> is assigned the return value of the <code class="notranslate">useMutation</code> call)  in the dependency array means that the effect fires only when it actually needs to/should do. However when trying to do so, <code class="notranslate">react-hooks/exhaustive-dep</code> returns the warning mentioned.</p>
<p dir="auto">I understand that I could get around this warning by destructuring the <code class="notranslate">mutateAsync</code> off of the returned object before using it in <code class="notranslate">useEffect</code>, but that would be worse DX wise in my opinion, and I'd like to avoid it if possible.</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Call a function within <code class="notranslate">useEffect</code> where the function exists directly on an object and include the function in the effect's dependency array.</li>
<li>See the ESLint warning coming from <code class="notranslate">react-hooks/exhaustive-dep</code>.</li>
</ol>
<p dir="auto">Link to code example: <a href="https://codesandbox.io/s/bold-fast-smo6g?file=/src/App.js" rel="nofollow">https://codesandbox.io/s/bold-fast-smo6g?file=/src/App.js</a></p>
<p dir="auto">The above example shows the following scenarios (to show that the behavior feels inconsistent and potentially wrong):</p>
<ol dir="auto">
<li>Calling a function within <code class="notranslate">useEffect</code> where the function exists directly on an object (the case in question).</li>
<li>Calling a function within <code class="notranslate">useEffect</code> where the function did exist on an object, but was called from a different variable.</li>
<li>Referencing another value (in this case a number) within <code class="notranslate">useEffect</code> where the value exists directly on an object.</li>
</ol>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">The <code class="notranslate">react-hooks/exhaustive-dep</code> rule returns the following warning (in the case in the code example above):</p>
<blockquote>
<p dir="auto">React Hook <code class="notranslate">React.useEffect</code> has a missing dependency: '<code class="notranslate">test</code>'. Either include it or remove the dependency array.</p>
</blockquote>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">No warning comes from <code class="notranslate">react-hooks/exhaustive-dep</code>, or an explanation is given by the rule as to why this is a problem?</p>
<p dir="auto">Hello I'm reading React.js and trying to extend it. One thing I've noticed is although wrappers of Transaction are guarantee to be executed pre- and post- the performing method, there seems no waiting mechanism for asynchronous wrapper functions. So if APIs are asynchronous, the <code class="notranslate">initialize</code> and <code class="notranslate">close</code> may fail to keep the order correctly, especially when the previous wrapper is still waiting the asynchronous result and the second one would start itself (from Transaction.js#L168 it looks like just a plain function call, there is no waiting code anywhere).</p>
<p dir="auto">From the current React.js there are no too much transaction instances, so the problem may be not serious. However, from the nature of Transaction it is a extendable and standalone component should not bind with DOM &amp; existing use cases, so I think it should be general enough to deal with the possible cases (and from the design principle of new DOM APIs it is very possible).</p>
<p dir="auto">(Sorry if I fired a duplicated issue, but I've searched issues and found no similar cases. If it's duplicated please close it)</p>