Skip to content

Concurrent Mode and UseSubscription with RxJS "lose" updates  #17314

@samcooke98

Description

@samcooke98

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:

  1. Click the "Increment Remote Count" button once
  2. Before the update is committed to the DOM, click the "Increment Local Count" update.
  3. The first update is "lost" ie; the output looks like:

image

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?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions