A todo list

A todo list in a browser: add, complete, remove, filter.

Three actors

Todos   the list, the draft text, the filter
Clock   ticks on its own timer
Page    the shell, holding both by reference

The clock is there to show that its tick does not redraw the list.

What Page holds is a reference to Todos and a reference to Clock. The clock ticking redraws itself and does not move Page's state. And if Page did redraw, it would not descend into the children, because their references did not change.

This is not an optimisation you can forget to apply. It is a comparison of references.

The half-typed text

The draft lives in Todos. Redrawing the list does not empty the input.

The rows carry key:, so reordering or removing moves the nodes rather than rebuilding them.

Markup

The item in the list is one sample the designer left; it is cloned per todo. Here too, there is no HTML on the LPScript side.