reactjs - In nextjs, using react's useTransition, next's Link is not working mid transition. Best practice for p

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:

What is the best practice for preventing this behavior?

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/OrenSayag/next-link-mid-transition-issue/tree/main

What is the best practice for preventing this behavior?

Share Improve this question asked Mar 12 at 15:18 Oren Sayag 411 silver badge6 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

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.