reactjsnext.js

In nextjs, using react's useTransition, next's Link is not working mid transition. Best practice for preventing this?

I use NextJS Link component for routing.

Also, I use useTransition for server actions.

The problem is that mid-transition, the Link component does not link.

Furthermore, the transition never ends when the transition action is an API call - because the call is cancelled I assume.

I created a POC for this issue:

https://github.com/OrenSayag/next-link-mid-transition-issue/tree/main

What is the best practice for preventing this behavior?

Solution

  • We have decided to use react-query lib instead of useTransition.

    I conclude we were wrong using useTransition for api calls, as the react-query lib provides so much more than just a pending state for this use case.

    useTransition is useful for UI intensive tasks, or background UI tasks, but not so much for api calls.