How is Virtual DOM implementation different from createDocumentFragment() if no state is observed?

Question

React

The virtual DOM is a lightweight copy of the DOM that is maintained/cached locally before being inserted into the real DOM. We can change it as we wish and then store it in our real DOM tree. It uses efficient comparison algorithms to update forward and backward changes and other use cases.
All this is done in order to avoid direct manipulations with the DOM, since this is an expensive operation.
We have a document.createDocumentFragment() method that can be used in JavaScript that also creates imaginary tree node objects to insert into the DOM.
I would like to know, if I don't have a view/component that needs to observe some kind of state or bi-directional binding (e.g. just render the template with options passed and handle events in the DOM), will the Virtual DOM really change this scenarios?
Or is it as good as createDocumentFragment() if all it has to do is just render and no state monitoring.

Answer 1

Virtual DOM React has nothing to do with DocumentFragment. From here, the answer to your question is brewing, that the implementation differs in everything.
Virtual DOM is just a simplified model of the DOM tree, Virtual DOM does not use any algorithms, this is what ReactDOM does when reconciling the tree. There are no insertions of the Virtual DOM into the real DOM. At least because of complete incompatibility.
If you're really interested in how the Virtual DOM and reconciliation work in React, you can read one of the many articles on the subject.