Collect subsequent attribute/property changes before rendering the changes
danieldietrich opened this issue · comments
I like the declarative rendering in React. It is based on virtual DOM diff. Web components have the attributeChangedCallback: each attribute change will lead to a call. It leads to code that looks like a big switch statement, each case directly mutates the DOM.
I want to think in directions, which lead more in direction of what React is doing, without being too rigid about how devs use the web APIs.
JS is single threaded. That means, Candid could 'record' one changes, by enqueueing an onUpdate call, while writing subsequent attribute changes (which are performed by the current "thread") to one object. That way, the onUpdate function of the user-space would be called only once and receive a complete object of changed properties instead of being called multiple times, receiving oldValue, newValue tuples.
The main benefit I see is that the component logic could be more complex. We would still need to modify the DOM directly (in contrast to React, which diffs virtual DOMs), however, we could take the whole property object into account when rendering changes. That would be more efficient than processing subsequent property-changes.
We will not do this for now. Having all props at hand is good when rendering a VDOM. However, web components directly mutate the DOM. Here it makes sense to react to single attribute changes.