The Diffing Algorithm: Keys

//now React knows that the element with key '2014' is the new one, 
//and the elements with the keys '2015' and '2016' have just moved.

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

When children have keys, React uses the key to match children in the original tree with children in the subsequent tree.

Related concepts

The Diffing Algorithm: Keys — Structure map

Clickable & Draggable!

The Diffing Algorithm: Keys — Related pages: