-
Notifications
You must be signed in to change notification settings - Fork 49.3k
Description
Do you want to request a feature or report a bug?
Bug - I think?
What is the current behavior?
In Concurrent Mode, it appears that if a render is interrupted, if a component is using useSubscription
the interrupted update is lost, which leads to "tearing"
The following codesandbox uses useSubscription
with a RxJS BehaviorSubject
, mimicking the example from here: https://www.npmjs.com/package/use-subscription#subscribing-to-observables
In the sandbox, clicking on the "Increment Remote Count" button triggers the RxJs BehaviorSubject
to increment. This is done outside of the React event handler (ie: via window.addEventLIstener
and so the updates are not batched together. The update to render the numbers is artificially slowed down.
If you click the "Increment Remote Count" button multiple times, the update works as expected.
If you interrupt the update, via clicking the "increment local count", only the last number will update.
So the Steps to reproduce look like:
- Click the "Increment Remote Count" button once
- Before the update is committed to the DOM, click the "Increment Local Count" update.
- The first update is "lost" ie; the output looks like:
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
https://jwenc.csb.app/ \ https://codesandbox.io/s/usesubscriptionconcurrentlosingupdates-jwenc
What is the expected behavior?
I'd expect there to be a commit as the above screenshot, but I'd then expect there to be a follow-up commit that restores the consistency. In other words, I'd expect in the above picture for everything to be 1
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
0.0.0-experimental-f6b8d31a7
I'd be willing to try to take a stab at writing a React test for this, if needed?