I remember that historically DOM used to be very slow on some browsers and virtual DOM was a huge performance boost. You could compute very quickly the difference in JavaScript and minimise the calls to the slow DOM browser API.

Now that Internet Explorer is really deprecated and DOM are fast enough in every browser, VDOM is not necessary.

What do you mean by "state tree" here? And how do you go from the state tree diff to the required dom diff?

Why diff trees at all when you can record a changeset and patch DOM based on that?

How do you get the changeset?

Preact does this and is also small and react compatible.

What you are describing sounds closer to how Svelte works.

writing to the DOM is slow, you use VDOM to batch updates and other optimizations

No it's not. It's pretty close to browser's native HTML parsing speed.

And VDOM just writes to the DOM in addition to doing a lot of other throwaway work and allocations.

Reading from DOM may be slow, if you read one of the properties that would trigger layout/style calculactions.