The VDOM is a lightweight representation of the UI in memory
The VDOM is synchronized with the "real" DOM as follows:
Save copy of current VDOM
Components and/or application state updates the VDOM
A re-render is triggered by framework
Compare VDOM before update with VDOM after update
Reconcile the difference by identifying a set of DOM patches
Perform patch operations on real DOM
Back to step 1
Node Difference Reconciliation Operations
If the node type changes, the whole subtree is rebuilt
If node type is the same, attributes are compared and updated
Sibling Difference Reconciliation Operations
If a node is inserted into list of same node type siblings, all children would be updated (if more information isn't provided)
When updating children of same node type, use key prop
each key must be stable and unique
key should be assigned when data created, not when rendered
Do not use the iteration index for key ids when rendering a list
Prop drilling is when you pass data through multiple layers of components only so a deeply nested child can use it, even though intermediate components don’t need that data themselves.
Use signals only where needed
too many signals can introduce performance issues
use signals to share state between different parts of application