Here are the options

1. Virtual DOM manipulation is very fast, so react would rebuild the whole <ul></ul> quickly
2. By the help of VDOM only that specific <li> will be updated.
3. The entire virtual DOM gets updated.
4. The entire real DOM gets updated.
5. or something else?

CodePudding user response：

The steps are something like this:

1- Virtual DOM changes.

2- React compares the changes with old snapshot of Virtual DOM. (This snapshot is taken right before the update of the virtual DOM)

3- With the help of this comparison React figures out which components in the UI needs to be updated. (This process is called diffing)

4- React knows which components has been updated, then it replaces the original DOM nodes with the updated DOM node.

So, just the changes will be update on DOM

CodePudding user response：

If you set a unique key attribute on each <li>:

1. The whole virtual DOM is updated.
2. Every node in the new virtual DOM is compared to the node in the old one by the key attribute.
3. Only the changed nodes are replaced in the real DOM.