Timing delay in react query loading and redux dispatch

[naveen1337]

React query is amazing to maintain a loading and fetching state, but when I want to do dispatch a data to redux, I am having some loading state and redux selector timing issue,

the loading state gets false, but it takes some slight delay timing, to select data from redux, I know why is this happening, I can fix this by maintaining a loading and isFetching state inside a redux. but is there any good ways other than that ?

[TkDodo]

Why would you need to dispatch data from react-query into redux?

[naveen1337]

Thanks for your explanation. but what if I want my data : Array to be sorted by the user input. the react query selectors looks good, but is it recompute the function when an state changes ?

[TkDodo]

but is it recompute the function when an state changes ?

have you read the resources I linked above? Because it is explained there:

selectors run on every render, so if you close over some local state, this will be taken into account. You can also memoize selectors with useCallback to only make them run if a) data from react-query changes or b) the dependency you care about changes. So yes, selectors will work like you want them to

[mcdougald]

Hey TkDodo,

Has anything changed since you wrote that article and this 3361 discussion?

I am still having a problem discussed here

Basically, I have 220 form fields and having 220 useQuery calls (with/without a select) resulted in bad performance on my page. Each field is a key in the response, if the field has a response.

Multiple users could be updating the form at the same time, ideally my project's backend/server would be better designed for this but it's a legacy system and I'm doing what I can.

[TkDodo]

does the bad perf come from re-renders or something else? I can take a look if you show a codesandbox reproduction.
but yeah, calling useQuery does have a slight overhead, and so does calling select. Not sure if it should result in measurable per degradation with 200 subscriptions though ...

[mcdougald]

Minor follow up for anyone else. I was at about 1k observers on my page for around 10 queries. 220 was the query with the highest observer count.

Part of my problem was staying on latest react-query package v3 package that supported react 18. I saw a lot of improvements finally upgrading to @tanstack/react-query v4.

Still trying to wrap my head around how I can stitch data from 5 - 8 sources together without prop-drilling a large list or obsessive observers. I haven't tried 1k observers on v4.

I moved the queries with lots of observers to redux, wrapped some props in useDeferredValue, and got my page working decently.

Very much an issue from legacy backend architecture & early frontend mistakes.