This repository demonstrates a subtle bug that can occur in React 19 when using useSyncExternalStore with legacy code or third-party libraries. The problem arises from conflicts between concurrent rendering and the update mechanisms of external stores. This can result in incorrect UI updates or silent data corruption.
The bug manifests when an external store's update doesn't correctly trigger a re-render in a component using useSyncExternalStore. This is especially problematic in complex component trees or when asynchronous operations are involved.
- Clone this repository.
- Run
npm install. - Run
npm start. - Observe the unexpected UI behavior. The counter might not always update correctly due to concurrent mode interfering with external store updates.
The solution involves carefully managing the external store's update process to ensure it interacts correctly with React's concurrent mode. This often requires adapting the store's internal mechanisms or using additional techniques to explicitly trigger updates and handle potential race conditions. See the bugSolution.js for a more robust implementation.