Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
use-subscription causes UI tearing in some random cases #16396
Do you want to request a feature or report a bug?
What is the current behavior?
Referring to this twitter conversation, it seems that
Here is a minimalistic application demonstrating the behaviour: https://github.com/milankinen/use-subscription-tearing-demo
What is the expected behavior?
I'd expect counters in the example application to always render same number.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Tested React version: 16.9.0 (haven't tested with older ones)
This is an interesting case.
For me, the first mutation pair (that doesn't tear) proceeds like so:
For the second mutation pair (the one that tears) the sequence is different in an important way:
I could "fix" the tearing in this case by reading the value in the outer change handler (outside of the state updater function, rather than inside of it) and I probably should make this change anyway. I'd like to better understand why this is happening first though.
I'm not sure yet why the different behavior occurs. It looks like React doesn't eagerly compute the state in the second case because
The good news is that I can catch this in a test. I had trouble at first, until I realized that the first interruption didn't cause the tear - but the second one did. (Test also requires two.)
I tried with v1.1.0 and confirmed that tearing is fixed.
Still check4 is failing. It might be rare edge cases.