How to use the startTransition from react?
I have a page that has a few tabs (tab types). The page feels laggy when I switch between tabs quickly.
I think I would like to implement the useTransition() hook from React to prevent rendering when the user tries to switch tabs quickly.
4 Replies
ambitious-aqua•6mo ago
I don't see an issue with TanStack here, but I can take a look at your code.
It looks like you're triggering a new fetch when switching tabs. Fetching itself doesn't impact rendering—it only affects data display. Maybe there's something off with the animation?
When I switch tabs, I use a loader to indicate that data is being fetched. After the initial fetch, the data is stored in the cache, so subsequent requests retrieve it from there.
Another option is to use prefetchQuery so that the data is already loaded before you click on a tab.
If you can provide more details or a code sample, we could take a closer look at the issue.
sunny-green•6mo ago
you need to either wrap the updates that will change the queryKey into startTransition, or wrap the values you pass into the queryKey into
useDeferredValuefascinating-indigo•2mo ago
or wrap the values you pass into the queryKey into useDeferredValuesorry to revive this but would be immensely helpful to have this specific detail mentioned in the suspense docs! the other note about using
startTransition is briefly documented but didn't help with the issue I was facing.
in all fairness, the new primitives related to suspense are still kind of mysterious to me, but glad i was able to dig this up to solve my issues 😄sunny-green•2mo ago
Did you read the react docs about suspense? They have all the important information there