Signals in React (II): Tear-Free Subscriptions

Goal of This Article Integrate our previously implemented signal / omputed system into React 18 Concurrent Mode in a tear-free way. The key principle: Snapshot reading + subscription must be handled by useSyncExternalStore . Why Does Tearing Happen? In React 18, the render phase can be interrupted, restarted, and replayed . If you read mutable external data directly during render (ex: someSignal.get() ) and that data changes before the commit phase finishes, the DOM may reflect a different state than the snapshot React rendered with. This inconsistency is called tearing : The rendered output and the underlying snapshot are no longer synchronized. The useSyncExternalStore Solution React provides a built-in mechanism specifically designed to prevent tearing: getSnapshot → synchronous snapshot reader subscribe → notify React when data changes React will re-read the snapshot right before commit to ensure consistency. This is the only officially supported way to safely connect external muta