React Transitions and external state consistency with useSyncExternalStore
0 reputation · 26 Jul 2023, 16:42 UTC
When utilizing React's Transition API to mark high-frequency state updates as non-urgent, the framework may interrupt rendering to maintain responsiveness. However, if these updates rely on an external state store, potential 'tearing' can occur where different UI components display conflicting versions of the same data during a single render cycle.
While useSyncExternalStore is designed to prevent this by forcing a synchronous re-render when the external store changes during a transition, the performance implications under extreme high-frequency updates remain complex. There is uncertainty regarding how the scheduler reconciles rapid external mutations when transitions are interrupted by subsequent high-priority events.
How does useSyncExternalStore prioritize re-renders when an external store updates multiple times during a single interrupted React transition? What are the specific performance costs of forcing synchronous updates to prevent tearing in a high-frequency event-driven environment?