React Tree Reconciliation

Created: 2022-12-12T21:08:27-06:00

Return to the Index

This card pertains to a resource available on the internet.

• Start with a cursor that walks over the old and new tree.
• If the types do not match: add destroying the old tree to tape, add the new tree from scratch.
• If types do match: the component is updated instead. Check for added, removed, and changed attributes. Write updating the attributes on an existing component to tape.
• When recursing in to a node React just looks to see which nodes are the same in a strictly ordered traversal. Adding to the end is cheap and the beginning is most expensive.
• Children can be given "keys." Child list is processed in to a set of keys and the set is used to detect which children have entered or exited the list. The set can also be analyzed to determine when elements have just been re-ordered.