In our last post we introduced how a modern frontend framework like React, Angular, or Vue are able to make your JavaScript state easier to sync to...
For further actions, you may consider blocking this person and/or reporting abuse
Appreciate the images and code for really breaking this down!
Thanks for the visuals and the code that truly help to dissect this!
As you explained in your first post, it can be tricky to keep track of all state changes, so the Idea behind the VDom was to automate this. Instead of handling each event, you just rebuild the complete DOM and then check if something has changed. Only those changes need to be reflected to the real dom. You mentioned, that this can get complex, but there are some practical aspects that should be mentioned too.
Reconciliation is a quite labourious task. You need to check the whole DOM even if only a single letter was changes. And a calculation might cause numerous state changes in a single call. So, you need to care that the process is not called too often (some kind of "debouncing"). I suppose it is not easy to find the right balance between updating the DOM too often and slowing down the reactivity.