[antris]

State and DOM being mutated all over the code base was the norm before React. In many apps, state was a thing that was spread out all over the code and could be mutated by any part of the code. And a DOM was another global state on top of that, that had to be kept in sync with the data of the application. Otherwise users would be shown a state that wasn't representative of the actual state of the application. People did this with careful DOM modification code, trying to always remember to set, reset add and delete DOM nodes correctly. Of course, this caused many bugs and sometimes huge performance issues.

If you tried to solve this problem by redrawing the DOM every time your app state changed somewhere in the code, the browser would freeze and all your form elements would be defocused on every update, scroll states would be reset etc. etc.

React solved this by the diff algorithm and doing surgical updates of the dom based on the components state. It does this by manually reading the state, keeping a virtual DOM in its memory and doing diff calculations.

But if your whole app is reactive by design, there's no need to read the app state, doing diffing or figuring out which DOM node to update which one not to update. The DOM update operations flow naturally by the declarations given by the programmer. Frameworks such as Svelte are moving into this direction and they're already seeing quite significant performance improvements compared to VDOM implementations.