Before you are ready to start using maquette, you need to be aware of two rules, which are both easy to follow. These rules are there to make sure maquette can generally render and diff very large pages at 60 frames per second on every device.

Rule #1 Always provide the same set of properties

If you render h('a',{href:'.',target:'_blank'}) and then you want to clear the target attribute, you may not omit the target attribute. You need to use one of the following:

If you omit the target attribute as in h('a',{href:'.'}) maquette will not clear the target attribute. This is because maquette does not sacrifice performance searching for properties that you may have left out on a subsequent render. This makes you responsible to always provide the same set of properties. The same principe applies to the nested classes and styles objects.

Rule #2 Distinguishable children

The second rule states that if a node has multiple childnodes with the same selector and these childnodes are added or removed dynamically, then they must have unique key properties.

A key property is typically used as follows: (If you are unfamilliar with the javascript map() function see this description on MDN)

h('ul', [
  items.map(function(item) {
    return h('li', {key: item.id}, [item.text]);
  })
])

This rule makes sure that a node is never accidentally morphed into an adjecent node and thereby doing the wrong animation or accidentally triggering a violation of the first rule.