UseQueries make Semantic Modal take a while to display
Hello everyone! In our project, we presently utilize React-Query and Semantic UI, but I have a problem where if I use UseQueries in Modal, it takes a while to display whether my data has already been retrieved.
Could you guys please help me to solve my issue, thanks in advance.
9 Replies
grumpy-cyan•3y ago
Hi 👋
If you can provide a sandbox we can take a look for you but this doesn't sound like a TanStack Query issue
xenophobic-harlequinOP•3y ago
Hi Louis, thanks for response.
Let me show more details
i have a semantic UI Modal, if i use UseEffect call api directly to retrieve data, the modal will show up immediately after i trigger a button. on the other hand, If i useQueries instead, my Modal will take a while to open.
useQueries or useEffect ( to make an api call) is inside that modal
grumpy-cyan•3y ago
I wouldn't be able to advise without seeing the code I'm afraid. If you can provide a sandbox we can take a look for you 🙂
xenophobic-harlequinOP•3y ago
because our project setup is quite a lot, so i just can give you a snapshot.
in the attachments, as i said before, if i replace useTopicsData with an UseEffect to get data directly, my Modal will show immediately.
afraid-scarlet•3y ago
Does the const queries reference ever change? It looks like the memoized isLoading maybe never updates?
xenophobic-harlequinOP•3y ago
yes it does, but isloading is doesn't matter, i have removed it and the result like a said above. The modal is stuck at queries first.
correct-apricot•3y ago
Could it be the cloneDeep? You can try using lazy initialisation variation of useState, i.e.
useState(() => initialState)stormy-gold•3y ago
if i replace useTopicsData with an UseEffect to get data directly, my Modal will show immediately.Can you show the useEffect that would show the modal immediately? And also the code that triggers the modal to be shown?
xenophobic-harlequinOP•3y ago
Hi Julien, i have tried to clear site data, and the modal show up immediately. May be the issue come from how react-query load cached data from indexDB ( i used custom persister by the way).
thank you all guys, i just update my react-query package, and the issue is gone, may be perf issue of react-core.
again, many thanks for your helps.