React Query - Slow performance with many small cached requests
I have a list of accordions. Every accordion have items that contain image.
On accordion click, I fetch items text data and image id to speed up list loading and load images later.
Inside an item, I use image id to fetch an image per item. Image is in base64 format.
In every accordion, I can have 10 or more items, so in total there can be few hundreds.
When I open just one or two accordions and cache them, the app is working fine. CPU jumps to 20-30%.
But if I open a lot of accordions and cache them (I can close them), next time I open accordion CPU usage jumps to 100%.
List still works fluent - it displays data instantly, however if at this moment go to diffrent view in my app, request from this view will not be fetched for like few seconds.
My guess is that react is rendering fine but when there are a lot of requested cached in react query than it checks them all to see if they need update or not. While cached is checked, new request (not cached ones) are blocked.
This happens even if staleTime is infinite.
If there is a way to optimize react query, that would be great.
If not, I will probably try to counter this with by fetching images per accordion to make number of react query entries in cache smaller.
On accordion click, I fetch items text data and image id to speed up list loading and load images later.
Inside an item, I use image id to fetch an image per item. Image is in base64 format.
In every accordion, I can have 10 or more items, so in total there can be few hundreds.
When I open just one or two accordions and cache them, the app is working fine. CPU jumps to 20-30%.
But if I open a lot of accordions and cache them (I can close them), next time I open accordion CPU usage jumps to 100%.
List still works fluent - it displays data instantly, however if at this moment go to diffrent view in my app, request from this view will not be fetched for like few seconds.
My guess is that react is rendering fine but when there are a lot of requested cached in react query than it checks them all to see if they need update or not. While cached is checked, new request (not cached ones) are blocked.
This happens even if staleTime is infinite.
If there is a way to optimize react query, that would be great.
If not, I will probably try to counter this with by fetching images per accordion to make number of react query entries in cache smaller.
