TanStack
Solid: bad `useQuery` performance when creating a lot of elements
Describe the bug
creating a lot of elements at once leads to ui stutters due to useQuery taking up to 4-5ms. even if there's already data cached and refetching is disabled.
Your minimal, reproducible example
https://stackblitz.com/edit/vitejs-vite-bcmxksoc?file=src%2Findex.tsx,src%2FApp.tsx&terminal=dev
Steps to reproduce
- open the reproduction
- click "show many"
- notice how the ui freezes for a while
Expected behavior
as a user, i expect useQuery to not block rendering so much, especially when there's already data in the cache
How often does this bug happen?
None
Screenshots or Videos
https://github.com/user-attachments/assets/894528f6-111c-45a9-a965-46e4bbf4f809
Platform
- OS: macOS (M3 Max)
- Browser: Chrome 141
- Version: 5.90.10, Solid 1.9.10
Tanstack Query adapter
solid-query
TanStack Query version
5.90.10
TypeScript version
5.9.3
Additional context
No response
@teidesu Hey! I ran your code on a Macbook M4 Pro, no lag in rendering. Maybe the issue is with your specific environment? Below's the screen recording of the run. https://github.com/user-attachments/assets/d2b5169f-24ee-463c-91e9-be6c6253cfc1
@marustas even on your recording it's visible how clicking the "show more" button makes the browser drop a few frames :c
just re-tested on m3 max, the issue is indeed for some reason less apparent than on the original recording, so i bumped the number of items to 5k for it to be more visible.
also added an "alternative" version with manual getQueryData call (available by adding #sync=1 to the url) for comparison, which performs much better: INP ~130ms vs ~550ms
my main point being that using useQuery shouldn't make rendering 4 times slower ðŸ˜
