React Concurrent Rendering and Legacy State Management Integration

Concurrent Mode Interoperability

React's concurrent rendering allows the framework to interrupt low-priority updates to handle high-priority user interactions. While this improves perceived performance, it introduces the risk of "tearing," where different components render inconsistent versions of the same state during a single commit phase.

To mitigate this, React provides the useSyncExternalStore hook, which is designed to synchronize external state stores with the concurrent renderer. However, uncertainty remains regarding the behavior of useEffect when an update is interrupted or discarded by the scheduler before it can be committed to the DOM.

When integrating a legacy synchronous state library with a React 18+ application, it is unclear how the timing of side effects is managed if a transition is interrupted by a higher-priority event.

• Does React guarantee the execution order of useEffect when a concurrent update is discarded?
• What is the expected behavior for external store subscriptions when a render is interrupted before completion?