Comparison
ReconciliationvsVirtual DOM
Reconciliation
the component's state survived the re-render because the framework decided it was the same element as before.
The algorithm that matches the new tree against the previous one to decide what to update, what to leave alone, and what to unmount. Its identity rules are what determine whether a component keeps its state or is thrown away and rebuilt, which is why moving a component to a different position in the tree can silently reset it. Understanding those rules is the difference between debugging a state bug and blaming the framework for one.
Full entry →Virtual DOM
you describe the whole interface for the new state and something else works out the smallest set of DOM changes.
An in-memory tree of what the UI should look like, diffed against the previous one to produce the minimal set of real DOM operations. Its value is the programming model — you write a function of state instead of a sequence of mutations — rather than raw speed, since hand-written DOM updates are always faster in principle. The cost is that the diff itself runs on the main thread for every update, and on a large tree that cost is measurable.
Full entry →