Difference between useIsFetching() vs useQueriClient().getQueriesData().length

[seiyab]

Hi 👋 .

I wonder about difference between useIsFetching() and useQueriClient().getQueriesData().length.

  const fetching =
    useIsFetching({
      active: true,
      predicate: (query) => query.state.status !== 'success',
    });
  const loading = useQueryClient().getQueriesData({
    active: true,
    fetching: true,
    predicate: (query) => query.state.status !== 'success',
  }).length;
  console.log('fetching', fetching, 'loading', loading)

fetching 0 loading 0
fetching 0 loading 20
fetching 20 loading 20
...

Do someone know the reason?

I'm using 3.39.3.

I'm sorry but I can't find minimal reproduction code so I can't provide Codesandbox.

[seiyab]

Second render shows different result on every mount.
The first one, third one and later ones works as expected as far as I know.

[TkDodo]

useIsFetching creates a subscription - it will re-render your component every time the value changes. useQueryClient just reads the static query client from react context, so useQueriClient().getQueriesData().length will just read the current value once. If your component re-renders for a different reason, it will also re-evaluate, but it will not re-evaluate on it's own.

[seiyab]

Thanks a lot for your response.
I understand the difference about a subscription. However, I'm still confused about why they yield different values on same rendering.
I feel that I don't understand your comment especially this phrase: "but it will not re-evaluate on it's own."
Does it mean "useQueriClient().getQueriesData().length doesn't re-render my component on changes of the value", or "useIsFetching() doesn't re-evaluate the value if the re-rendering is caused by different reason"?

[TkDodo]

it means that useQueryClient().getQueriesData().length doesn't re-render the component on changes of the value.

[seiyab]

I understand, thank you.
So, the original problem is still somewhat unclear, right?

[TkDodo]

I don't know. Things have changed a lot since v3, and you're not showing a runnable reproduction 🤷

[seiyab]

OK.
I'll update this discussion if

• I reproduce with Codesandbox
• Or I update react-query
• Or I find a possible reason