Different useSyncExternalStore compared to React

[nihil-pro]

Hi
I’m the author of kr-observable package, and while taking measurements I noticed that my library works a little slower with preact/compat. I noticed, that useSyncExternalStore in preact is based on useEffect and useLayoutEffect hooks, and that looks like you are not yet done. Am I right? Or this is the final version of your useSyncExternalStore implementation? I just guess that preact have to be faster.

[rschristian]

I noticed, that useSyncExternalStore in preact is based on useEffect and useLayoutEffect hooks

This matches React's shim, more or less, as the comment indicates.

and that looks like you are not yet done

How so? It doesn't look like it's been touched in over a year and a half, so unless you have some issue with it, as far as I know it's pretty much done?

---

Synthetic benchmarks like that one aren't representative of much, they're so far removed from real-world apps that they shouldn't be given much weight; at best, they're useful for tracking performance regressions/improvements of a singular lib.

Are you experiencing real issues in your apps because of this or is a synthetic benchmark just not as high as you'd like?

Edit: Might also be worth testing copy/pasting that hook out of preact/compat & into your app. preact/compat cannot be treeshaken and intentionally incurs some overhead, you might be seeing that rather than any issues from the uSES impl

[nihil-pro]

Are you experiencing real issues in your apps because of this

No issues. That's why this is a question in general category ))

just not as high as you'd like?

Yep. I think it can be faster. I'm using performance tab on chrome, which now shows the execution time of each function, and useSyncExternalStore is slow (more precisely – useEffect and useLayoutEffect).

Synthetic benchmarks like that one aren't representative of much

I agree. But this test is much better compare to something like this https://www.measurethat.net/Benchmarks/Show/15735/0/string-vs-number-vs-symbol

Thanks for answer.
What do you think of a brand new uSES that would more accurately reflect its existence? I mean, one that would accept a single argument, a store that implements the appropriate interface?
Something like this:

interface Store {
  subscribe(subscriber: () => void): disposer,
  snapshot: any
  serverSnapshot: any
}

const store: Store = {
  subscribe(subscriber) {
    return this.dispose
  },
  snapshot: 1,
  serverSnapshot: 1,
  dispose() {}
}

useExternalStore(store)

This would be very convenient for libraries such as kr-observable or mobx

[rschristian]

No issues. That's why this is a question in general category ))

Completely reasonable, just checking

What do you think of a brand new uSES that would more accurately reflect its existence? I mean, one that would accept a single argument, a store that implements the appropriate interface?

Whilst I'm not the greatest fan of the uSES API and think something along the lines of what you suggest could be useful, I'm not sure there's enough of a demand. It'd be Preact-specific and pretty niche, not to mention most users would be better off picking up signals as they'd handle this & more.