feat(react): migrate to useSyncExternalStore

[gdorsi]

Migrate the React subscription logic to useSyncExternalStore.

The main advantage of adopting useSyncExternalStore is to follow "The React Way" to subscribe to external stores, which should give us better compatibility and hopefully less surprises with the latest React features.

useSyncExternalStore also comes with a dedicated getter which should hopefully help with the SSR integration.

TODO:

• [x] Check how references are managed within Jazz
• [x] Test all the example apps to see if we are breaking some of them
• [ ] Add unit tests
• [ ] Check the React Compiler compatibility
• [ ] Non blocking: Do some resarch on how we could use Suspense (would probably be very useful for SSR)

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
binary-test	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 8:20pm
books-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 8:20pm
chat-clerk-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 8:20pm
jazz-chat	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 8:20pm
jazz-homepage	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 8:20pm
jazz-inspector	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 8:20pm
jazz-pets	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 8:20pm
jazz-todo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 8:20pm
music-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 8:20pm
passwords-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 8:20pm

[aeplay]

Thank you very much, I've been meaning to transition to useSyncExternalStore for a while.

CoValues are updated on direct edits because the underlying subscription (to a RawCoValue from cojson and the even deeper CoValueCore) creates a new view object every time the subscription updates.

Forcing recreation of a parent object view on a child update is something that the SubscriptionScope was meant to do but I never got it to work quite right, so I resorted to calling an onUpdate handler from any nested update together with a top-level setState. To fix this, you'll probably need to look into Refs and how they try to cache high-level Jazz CoValues for underlying cojson RawCoValues

[gdorsi]

Tested all the example apps!

Only the PasswordManager required a fix because the changes on how we manage references now is actually a breaking change.

Effects with a coValue as dependency are now triggered every time they get an update.

We will probably need to communicate that 🤔 On the other side this should make us more compatible with the React Compiler, but that's something I need to confirm with more tests.

Next-up, unit tests!