Reference to useQuery is changing on every re-render

[dusty]

Describe the bug
This is more an FYI, not sure what the intention is here.

In 3.8.3 the return of useQuery was stable between re-renders, but in the 3.9 series, it is no longer. This caused an issue where we had a useMemo that only used that object as a dependency.

eg:

const query = useQuery(...)
const results = useMemo(() => {
  return query.data?.stuff
}, [query])

<OtherThing results={results} />

This was fixed in our code, by updating the useMemo dependency.

const query = useQuery(...)
const results = useMemo(() => {
  return query.data?.stuff
}, [query.data])

<OtherThing results={results} />

To Reproduce
Steps to reproduce the behavior in 3.9.7:

1. Go to https://codesandbox.io/s/goofy-williams-cie1d?file=/src/index.js
2. Click on the button with the 0 in it
3. Watch the console log increment "query changed"

Steps to reproduce the old behavior in 3.8.3:

1. Go to https://codesandbox.io/s/hungry-gareth-sexnh?file=/src/index.js:543-548
2. Click on the button with the 0 in it
3. Watch the console log NOT increment "query changed"

Expected behavior
I expected the behavior to not change

Screenshots

[TkDodo]

Yes, this was noted in the PR: #1775

i think it is best to keep the dependencies as narrow as possible. If you only use data, only depend on data. Note that the queryInfo object was also a new reference on background refetches before (not on every render though) - because the isFetching flag changes. So you were likely recomputing that too often before as well.

[dusty]

Thanks. I just wanted to point it out in case it was unknown.