Does ngFor directive re-render whole array on every mutation?

In addition to Gunter's answer, if you want to know which part of your UI is rendered/re-rendered you can with Chrome (even independent from any lib/framework) :

• Open your debug panel
• Menu (of debug panel) / More tools / Rendering

You should then see the following panel :

Toggle the Paint Flashing option on, and have some fun with your list.
If an area is flashing green, it has been painted / re-painted 👍.

EX : If you take the Plunkr in Gunter's answer : http://plnkr.co/edit/oNm5d4KwUjLpmmu4IM2K?p=preview and toggle the Paint Flashing on, add an item to the list and you'll see that previous items do not flash. (which means there's no repaint).

No , it re-renders only when the array itself is replaced by a different array instance.

update

Thanks to Olivier Boissé (see comments)

Even when a different array instance is passed, Angular recognizes if it contains the same item instances and doesn't rerender even then.

See also this StackBlitz example

If the used IterableDiffer recognizes and addition or removal at the beginning or in the middle, then an item is inserted/removed at that place without re-rendering all other items.

The animations demonstrated in Plunkers in answers of this question How can I animate *ngFor in angular 2? also demonstrate that. In fact this kind of animation was a driving factor to get this implemented this way (in addition to general optimization)