[briantakita]

> Each second Svelte will completely destroy the tree from the previous second, and completely rebuild the tree for this second

Here is the repl of the code you posted.

https://svelte.dev/repl/1a70f2f38af94ed7ac8bd032feea52f9?ver...

A Svelte component is mutable & manages the related DOM elements which are also mutable. In the conditional, the tree is re-rendered.

Would React's diff algorithm be able to recycle the `<p>surgical</p>` DOM Node? How much more performant would detaching & reattaching `<p>surgical</p>` be than recreating `<p>surgical</p>`?

Assuming the `<p>surgical</p>` can be recycled, the use case having the largest effect is a large inner tree being wrapped/unwrapped; where the inner tree would simply be moved instead of recreated.

In Svelte, this can be optimized by using a subcomponent, as seen in the repl example. You can examine the compiled js.

[hajile]

I believe React recycles DOM nodes based on type (they decide some DOM nodes are faster to recreate instead of reuse depending on the circumstances)

I may be wrong, but I believe hyperapp recycles both the physical DOM node and the attached vdom node together (IIRC, they mark reused vdom nodes as "recycled" instead of directly comparing objects so they don't have to construct as many new vdom objects).

Preact kinda cheats here because they diff against the DOM directly.