Unexpected order of status changes for queries checked in multiple locations

[themagickoala]

Describe the bug

I am having an issue with upgrading to React Query v4.3.4 from v3.34.17 in my test suite. I have a utilty component which I use in a lot of my tests in order to wait for all queries to have settled by pulling query keys from the cache and passing them to useQueries. The issue is that the loading state of the queries in this useQueries call updates earlier than the loading state where the query itself was originally called (in useQuery in the component I'm trying to test).

I have tried to reproduce this in Code Sandbox with a minimal example, but the minimal example works as expected, so I'm sure there must be something else I'm doing that is causing this issue, and I was hoping to get some advice on where to start looking/whether this issue has been seen before.

The minimal scenario is that I have a component (First) which calls a query (useCharacters) and mounts a child component (Second) which itself calls another query (useMoreCharacters). The test mounts both First and my Loader component, and each component logs out the loading state. In the codesandbox, the order of logging is as expected:

• Loading in component
• Loading in child
• Loading in loader
• Loaded in child
• Loading in loader
• Loaded in component
• Loaded in child
• Loaded in loader

i.e. the Loader is the last to report the loaded state. However, in my codebase the Loader is the first to report the loaded state, and the DOM has updated (and the associated loaded text has been found) before the First component can update, which intermittently results in test failures.

Your minimal, reproducible example

https://codesandbox.io/s/green-darkness-ekh7ty?file=/src/App.js

Steps to reproduce

1. Open the minimal reproduction;
2. Open the console;
3. Review the order of logs.

Expected behavior

The code sandbox produces the expected behaviour, but in my codebase, the Loader is logging "Loaded" before the components do (and sometimes allows further code execution before the components log).

How often does this bug happen?

Often

Screenshots or Videos

No response

Platform

• OS: Linux Pop!_OS (Debian) 22.04
• Environment: Node 16.15.0, Jest 26.6.3, React 17.0.2, RTL 12.1.2

react-query version

v4.3.4

TypeScript version

v4.6.2

Additional context

I realise that the minimal reproduction has not reproduced the issue, and that I'm looking for guidance rather than demonstrating a bug. Feel free to move this to a Discussion if that would be more appropriate!

[TkDodo]

I have a utilty component which I use in a lot of my tests in order to wait for all queries to have settled by pulling query keys from the cache and passing them to useQueries

This seems like a pretty big overhead. I'm curious if a different solution would be better here:

• generally, this is what suspense is trying to do - it's a global loading spinner more or less. I know it's technically still experimental but maybe it's worth trying out?
• If that doesn't work for you, I would look into useIsFetching. It will give you the number of matching queries that are currently fetching. Keep in mind that background refetches are also accounted here, so if you only want hard loading states, you can do:

const loadingQueries = useIsFetching({
  queryKey: ['myKey'],
  predicate: (query) => query.state.status === 'loading'
})

[themagickoala]

Thanks @TkDodo, I'll have a play with this and get back to you. We haven't made the jump to React 18 yet, but keen to look at doing so soon.