support rxcore API for batching updates in event handlers

[lxsmnsyc]

I've discussed this on Discord temporarily.

Provide a way for the client to batch updates inside event handlers. React is already doing this internally with react-dom, and I believe others as well. This is useful specially if there's multiple signal updates in a single event call. Solid, compostate and other libraries out there currently provides a way to do so.

import { batch } from 'rxcore';

[ryansolid]

Yeah, this one has runtime implications so to pursue this I need to create a flag system so that frameworks that did not wish to use this feature could have it dead code eliminated. When I was using ERB to generate the runtime this was a lot easier to do but now I'm relying on the bundlers to do it. Which is fine, just need to figure out a universal way to inject this config.

I think this tweet is particularly interesting to show how different every framework handles these things.

https://twitter.com/RyanCarniato/status/1353801009844240389

If we were to add batching the behavior would be identical to React. I'm much more on the opt-in batching mentality but that's because I like low-level things and with fine-grained, the punishment for not batching is much less. But I could see the desire for frameworks to do this by default though so it seems like a reasonable configuration.

[lxsmnsyc]

I think the example in that tweet is wrong. The difference might be was when does it get committed to the UI, in which case React's behavior was correct. In terms of committing state updates, all of them are correct (React already updates the state) but then the log is different because of React's closure, of course.

In Solid's case, if the event bubbles, it may trigger multiple re-renders instead of just a single render due to unbatched behavior across the bubble. For instance, assume a state update that is done through a parent and a child component that shares the same event delegation. Both of them gets to independently update signals, which might be naive in some cases.

Edit:

in the tweet, React, Vue and Svelte shared the same behavior for state update and UI commits, only Solid has independent UI updates.