I'm a student and trying to build an elementary react like library of my own for learning purposes (lets call it UnReact). One detail that I am having trouble figuring out is like follows:
Let a sequence of user events be like-
Step 1) Do something that results in update of state
Step 2) Build a new DOM tree that reflects the changed state (I use node.cloneNode() to copy a DOM tree, and the change that to an updated version)
Step 3) Replace the old DOM tree with the new one. (Using node.replaceWith()) (Note that this library does not use VDOM and the likes, but this is just a toy library.)
The problem I am facing is about recreating the focused fields, checked boxes, selection of radio buttons and so on after each Step3. The clone node function does not create a cloned DOM tree with these saved. That is bad, because it means after each Step 3, the user has to recheck checkboxes and so on...
One way to solve this is to create my own special input elements, checkboxes and so on, that tell my UnReact library what their state was, and then it can properly recreate on the new DOM tree. This is somewhat tedious.
Is there a better way to handle this? Any information on how react handles this would be fine. I would also appreciate any solution tailored to my use case.
Edit: Now that Nicholas has answered the first of two questions, I am mostly looking for input on the second part. (Ie. fixing lost focus, and rechecking boxes even on a new DOM tree.)
Thanks!