query: Infinite renders when using output of useQueries in useEffect dependency array
Describe the bug
When using the output of useQueries in the dependency array of a useEffect, the containing component will rerender infinitely. This bug seems to have been introduced in v3.9.0 and exists in all later versions.
Please see the Codesandbox I created below and change the version of react-query from 3.8.3 to any later version.
To Reproduce Steps to reproduce the behavior:
- Go to https://codesandbox.io/s/wild-dust-p7swc?file=/src/QueryExample.js
- Change the
react-queryversion fromv3.8.3tov3.9.0or greater to see the issue. (Warning, might freeze your browser due to infinite rerenders)
Expected behavior
Expect the results of v3.8.3 and lower, where the useEffect is only called once when needed.
Desktop (please complete the following information):
- OS: MacOS
- Browser: Chrome - Version 96.0.4664.55 (Official Build) (arm64)
- Version: >v3.9.0
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 6
- Comments: 16
What’s the current status of this? I am running into the same issue with useEffect -> set state. Some times it works, some times it does not. I guess switching to useMemo will not make a difference? Actually I’d be fine with a few reruns, until all queries are fetched. Will there be a workaround in v4?
Thanks @TkDodo for working with me on this haha.
Is there really no way that we could add referential stability to the
results, except when the response data is actually updated? It seems like my use-case would be a fairly common one.