useSWR seems to trigger suspense boundaries even if not using suspense mode

[miguelvictor]

Bug report

I am using swr in my Next.js (using app dir) project. In some sections of my pages, I need swr to fetch data from the browser (no prerendering involved and no suspense stuff). Just vanilla client-side fetching. However, for some reason (I'm not sure whether it is during the fetching or the rendering phase), it triggers my suspense boundaries. So, in addition to checking isLoading, I also need to wrap my client components that uses swr inside <Suspense> otherwise the loading.tsx of my whole page will be shown.

What kind of issues did you encounter with SWR?

swr triggers suspense boundaries even if not using suspense mode

Expected Behavior

How did you expect SWR to behave here?

swr should not trigger suspense boundaries (except maybe if {suspense: true} but not in my case)

Repro Steps / Code Example

use a client component within nextjs app dir project

Additional Context

SWR version: v2.2.4 Add any other context about the problem here.

Maybe this is not specific to SWR because I also noticed this issue when i was trying out react-query but maybe I'm wrong.

[Connoropolous]

I am also seeing this.

[Connoropolous]

@miguelvictor I figured out that this relates to whether or not you use startTransition . I still don't fully understand it, but when I started wrapping state updates in startTransition it stopped my UI from falling back on Suspense...

[miguelvictor]

But I don't use setters in my components. I just directly consume the data returned by the swr hook. But im glad you found a way around it @Connoropolous

[Connoropolous]

I'm still fumbling here, but if you do paginate you likely call 'setSize' at least, and I also wrapped that in startTransition. I still think there's a bug, because why should it trigger suspense.

[shuding]

Can anyone share a reproduction repo? Thanks!