RFC: Migrate to useSyncExternalStore for Concurrent Rendering Safety

[lyw405]

Hey everyone 👋

I'd like to propose migrating Jotai's React bindings from the current useReducer + useEffect pattern to React's useSyncExternalStore API. This change would better align Jotai with React 18+ best practices and resolve potential issues in concurrent rendering — especially state tearing.

🎯 Why?

Currently, useAtomValue uses useReducer and useEffect to subscribe to atom updates:

const [[value], rerender] = useReducer(...)
useEffect(() => store.sub(atom, rerender), [store, atom])

While functional, this approach can lead to tearing in concurrent mode — where different components may read inconsistent values during the same render pass. This violates React's principle of consistency for external state.

React officially recommends useSyncExternalStore for libraries managing external state because it:

• ✅ Guarantees consistent reads across components
• ✅ Prevents tearing in concurrent rendering
• ✅ Provides built-in SSR support via getServerSnapshot
• ✅ Is now the standard adopted by Redux, Zustand, Valtio, and others

🚀 Proposed Change

Replace the current subscription logic with useSyncExternalStore:

import { useSyncExternalStore } from 'use-sync-external-store/shim'

const value = useSyncExternalStore(
  (callback) => store.sub(atom, callback),
  () => store.get(atom),           // client snapshot
  () => store.get(atom)            // server snapshot (SSR)
)

We'd use the official shim to ensure compatibility with React 17.

✅ Benefits

Aspect	Before	After
Concurrent Safety	⚠️ Possible tearing	✅ Guaranteed consistency
Code Complexity	Manual subscription logic	Simplified, idiomatic API
SSR Support	Manual workarounds	Native getServerSnapshot
React 17 Compat	✅	✅ (via shim)
Bundle Size	–	+~2KB (shim dependency)

⚠️ Potential Breaking Changes

• The delay option may need to be redesigned or deprecated (it was designed for debouncing re-renders, but useSyncExternalStore delivers updates synchronously).
• Slight timing differences in subscription callbacks.
• SSR hydration behavior will be more reliable (a fix in most cases, but could affect edge cases).

🤔 Open Questions

I'd love your input on:

1. Should we keep the delay option? If so, how should it work with synchronous updates?
2. Is +2KB bundle size (shim dependency) acceptable for the concurrent safety benefits?

🙋 Call for Feedback

Please share your thoughts:

• Is this migration worth the breaking changes?
• Are there any behaviors or use cases we must preserve?
• Any concerns about the implementation approach?
• Would a PoC or demo be helpful?

📚 References

• React useSyncExternalStore Docs
• React 18 Working Group: External Store Tearing
• Zustand's Implementation

---

P.S. I'm happy to implement this change if the team agrees on the direction. 🛠️

Thanks for reading — looking forward to your feedback! 🙏

[dai-shi]

Thanks for raising it up. We can't simply migrate, but our plan is to add the uSES version in the next major. Stay tuned and please be patient.