Build a Frontend Web Framework (From Scratch)

12 Keyed lists

This chapter covers

• Working with keyed lists of components
• Working with keyed lists of elements
• Updating the application instance
• Publishing the new version of the framework

Components have internal state. This state is hidden from the outside world—not reflected in the virtual DOM tree that represents the view—and thus can’t be used to compare two component virtual DOM nodes. But to patch the view correctly, you must make sure that when you have a list of components, the reconciliation algorithm can distinguish among them.

Let’s look at an example. Suppose that you have a Counter component with a count state property, which can be initialized with a different value for each component instance:

const Counter = defineComponent({ ...