Should I care about useSyncExternalStore?

[stephenh]

👋 Hey! I've been checking on legend-state every ~few months or so, as a potential "modern mobx" for us to migrate our ~large-ish app over to at some point. It looks great!

One of the other libraries I'm looking at is Valtio, which is also "kinda mobx-ish" (although less so than legend-state) but in particular it touts using snapshots + useSyncExternalStore to avoid screen tearing in React 18 w/concurrent rendering.

Which everyone seems to make a big deal about...like afaict it's basically the reason that useSyncExternalStore exists (avoiding screen tears).

Given I know you're super-close to React internals & optimization in general, I'm curious if you have an opinion about the importance of useSyncExternalStore in particular but also screen tearing in general?

Afaict from admittedly ~10 minutes scanning code, legend-state is not using useSyncExternalState internally, to be OCD about preventing torn renders.

But, maybe that's fine? Like, sure the screen is briefly torn, but with observers you're going to immediately re-render the "was briefly inconsistent" component essentially immediately anyway. Maybe the user notices for like 50ms? Maybe?

I dunno, I know this is a random question, but curious on your thoughts if you have the time.

Thanks!

[jmeistrich]

We haven't gone that direction yet mainly because I don't know how to test it. I've tried to make examples with concurrent rendering but I've never seen any tearing issues. If we can find a repro of a problem I would be happy to fix it with useSyncExternalStore or take a PR converting to use useSyncExternalStore. All of our reactivity uses our useSelector hook so that would be the one place to change it.

[stephenh]

Thanks for the quick response!

Your inability to even test tears caused by concurrent rendering only adds to my suspicion that the important of screen tearing is overblown. I dunno, maybe because it's a fun technical problem to solve, is why it's getting a lot of attention? 🤷

I've not dug in to it, but I saw this go by as a test bed for screen tearing:

https://github.com/dai-shi/will-this-react-global-state-work-in-concurrent-rendering

But, again, sounds like it's hard to setup: purposefully computational intense/fake workloads in the middle of a render to try and "catch" a tear that may not actually happen.

I'm pretty happy with your answer, albeit it matches my bias, of I'll worry about this when it is an actually observed problem. :-D

(Which, who knows, maybe it will be "obviously an issue" from day 1 when our app is on React 18, but we're not there yet anyway.)

Thanks again!

[jmeistrich]

We have three apps on React 18 and I've never seen any tearing. I think you're right that it's in very specific scenarios. We also do a lot of batching to make sure multiple changes only cause one render. But if we find it is a problem we will fix it asap. I'll check out that link to learn some more.

[jmeistrich]

FYI we just released an update @1.0.0-rc.20 which changes to use useSyncExternalStore. I still never reproduced any problems but it's a good change anyway :).