useIsFetching() returns 0 when isFetching from query is true

[amie-wilt]

Describe the bug
A clear and concise description of what the bug is.
Both useIsFetching() and queryClient.isFetching() are 0 when isFetching from a useQuery call is true

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.
I expect useIsFetching() to return 1

Screenshots
If applicable, add screenshots to help explain your problem.

Console log statement for useIsFetching() call:

Console log statement for <RecentPublication />:

useFetchCommentary:

Resultings logs:

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser: [e.g. chrome, safari]
• Version: [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser: [e.g. stock browser, safari]
• Version: [e.g. 22]

Additional context
Add any other context about the problem here.

[TkDodo]

1. you are logging the recent pub isFetching during render, and not in a useEffect. That's why it prints before the isFetching after mount. if you log both in an effect, you will likely see that you first get after mount 0 followed by recent true

2. the isFetching after mount prints false because when the component mounts, it is false. You are depending on the result of useIsFetching, but your effect dependencies don't represent that. The eslint rule "react-hooks/exhaustive-deps should flag that.

[amie-wilt]

@TkDodo Thanks for the response, I'm sure I'm missing something here so pardon my misunderstanding on this.

1. I moved recent pub isFetching to a useEffect with no deps for an "on mount" action but am still seeing it print first, which is what I would expect?:

2. Why would isFetching after mount be false when the component mounts? Again, I think I'm probably missing something here but wouldn't the component be considered mounted after it's children mounted? Therefore <RecentPublication /> mounts and fires recent pub isFetching first and then isFetching after mount second in its parent?

[TkDodo]

no worries, I think I closed prematurely and should've moved this to a discussion. apologies.

if RecentPublication is a child of Dashboard, and they both do useEffects, I'm relatively certain that the effect from the parent should run before the effect of the child. can you reproduce this in a codesandbox? Anyhow, if you want to log isFetching, I would set the dependency array accordingly:

const isFetching = useIsFetching()
useEffect(() => {
  console.log('isFetching count', isFetching)
}, [isFetching]

[amie-wilt]

I did a quick sandbox for child/parent mounting order: https://codesandbox.io/s/frosty-ellis-xs02b?file=/src/Child.js
Also, this is in a react native app, not sure it matters.

I'm trying to show a "global" loader for a dashboard view with cards. Instead of calling useQueries and passing down the results to children (cards), I'm useQuerying individually in each dashboard card (because they're also used elsewhere) with the idea I'd be able to use useIsFetching to determine the fetching state in the parent.

So in Dashboard I'd have:

const [loading, setLoading] = useState(true);

useEffect(() => {
if (isFetching === 0 && loading) setLoading(false)
}, [isFetching])

But because isFetching is 0 immediately, loading is set to false immediately and my loading state is moot.

[TkDodo]

yes, so in the parent component, on the first render, isFetching will be 0. Then, once a query really fetches, this will go to 1.

I don't think you need state for the loading indicator. You can just do:

const isFetching = useIsFetching()
const loading = isFetching > 0

loading is a derived state from isFetching

[amie-wilt]

Fair enough... I started overcomplicating this when I implemented refreshing with react native's <RefreshControl /> (don't want to show loader when refreshing) but I can obviously use the refreshing flag so that const loading = isFetching > 0 && !refreshing.

Thanks for your time on this!