Issue 1:
eslint-plugin-react-hooks version: 4.2.0

When calling a function within useEffect where the function exists directly on an object and the function is included in the effect's dependency array, the react-hooks/exhaustive-dep 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.

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!

It's also worth noting that I found this out when trying to call react-query useMutation mutateAsync within a useEffect call. As the return value of useMutation is not referentially stable (TanStack/query#1858), 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 x.mutateAsync (where x is assigned the return value of the useMutation call) in the dependency array means that the effect fires only when it actually needs to/should do. However when trying to do so, react-hooks/exhaustive-dep returns the warning mentioned.

I understand that I could get around this warning by destructuring the mutateAsync off of the returned object before using it in useEffect, but that would be worse DX wise in my opinion, and I'd like to avoid it if possible.

Steps To Reproduce

Call a function within useEffect where the function exists directly on an object and include the function in the effect's dependency array.

See the ESLint warning coming from react-hooks/exhaustive-dep.

Link to code example: https://codesandbox.io/s/bold-fast-smo6g?file=/src/App.js

The above example shows the following scenarios (to show that the behavior feels inconsistent and potentially wrong):

Calling a function within useEffect where the function exists directly on an object (the case in question).

Calling a function within useEffect where the function did exist on an object, but was called from a different variable.

Referencing another value (in this case a number) within useEffect where the value exists directly on an object.

The current behavior

The react-hooks/exhaustive-dep rule returns the following warning (in the case in the code example above):

React Hook React.useEffect has a missing dependency: 'test'. Either include it or remove the dependency array.

The expected behavior

No warning comes from react-hooks/exhaustive-dep, or an explanation is given by the rule as to why this is a problem?

Issue 2:
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 initialize and close 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).

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 & 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).

(Sorry if I fired a duplicated issue, but I've searched issues and found no similar cases. If it's duplicated please close it)