Tanstack store, useSyncExternalStore and React concurrent mode

[ha1fstack]

(Disclaimer: this is more like a rant about my experience)

I love Tanstack libraries, and Tanstack store is a great addition and fundamentals for other Tanstack libraries.

However the only problem I have with this library is that the implementation is framework agnostic - so it uses useSeS - and it breaks transition.

(https://blog.axlight.com/posts/why-use-sync-external-store-is-not-used-in-jotai/)

I could bare with this if I used this library directly to manage state in my service application since I can just use other libraries with transition support until React finally supports fully featured useExternalStore. But Store is the building block for other libraries such as Router or Form etc.

I heavily utilizes transition features in my code, but for example

• startTransition does not work with Tanstack Form - since it uses Store under the hood
• My routes show pending screen between navigation when the suspensive boundary is triggered - because it uses Store. (Next / React Router supports transiton, this is my only blocker to migrate all services to Tanstack Router)

So what can we do about it?

• Don't use stores for Tanstack libraries

  • This is the least likely solution

• Wait for React to support transition?

  • But when?

• Maybe we could make a 'vanilla react' version of it..?

  • For example, Zustand provides a version that doesn't use useSeS
  • other attempts: https://thejustinwalsh.com/react-concurrent-store/