It's a good demonstration on how to use it, but I think I missed how it works. Is "router.push" a suspense compatible function? It isn't obvious how react knows when the transition is complete.
Great question! Yup, router.push is suspense compatible. It sets states that would cause the application to suspend. That's how React is aware of the transition... the fact that you're setting state causes a Suspense boundary to render. Then React knows that the transition is complete when the new URL (state) has loaded all it's data and doesn't render any more Suspense boundaries.
Doesn't it render a page on the server for every key change? Or it have something like debounce under the hood? Should we wrap it to denounce ourselves?)
In the upcoming React 19 release there will be support for transitions to take an async function. Right now they are calling these "async transitions". Hope that answers your question!
@@RyanToronto I have been using them with server actions from next especially the isPending, I don't know if it is really a good idea since most server actions are asynchronous
Never knew until now use of useTransition hook. You are superb
Thank you @gohelboy!
Thanks for this, Ryan! 🙏
My pleasure!
Loved the course! Looking forward to more 👍
Awesome! Thanks Karson!
Really good.
Thanks!
Can you please share the github repo?
It's a good demonstration on how to use it, but I think I missed how it works. Is "router.push" a suspense compatible function? It isn't obvious how react knows when the transition is complete.
Great question!
Yup, router.push is suspense compatible. It sets states that would cause the application to suspend. That's how React is aware of the transition... the fact that you're setting state causes a Suspense boundary to render.
Then React knows that the transition is complete when the new URL (state) has loaded all it's data and doesn't render any more Suspense boundaries.
Doesn't it render a page on the server for every key change? Or it have something like debounce under the hood? Should we wrap it to denounce ourselves?)
Yup! You can wrap it in debounce if you'd like to avoid going to the network right away.
Can it work with aaync functions
In the upcoming React 19 release there will be support for transitions to take an async function. Right now they are calling these "async transitions". Hope that answers your question!
@@RyanToronto I have been using them with server actions from next especially the isPending, I don't know if it is really a good idea since most server actions are asynchronous
@@emmanuelxs6143 Oh yah with Next.js you can absolutely use async transitions
@@RyanToronto thanks for the update, I appreciate