Keys

This problem can of course be solved and the way for this is the key attribute which is supported by React. Children posses keys and these keys are used by React to match children between the subsequent tree and the original tree. The tree conversion can be made efficient by adding a key to our previous example:

  <ul>
    <li key="2018">Carlos</li>
    <li key="2019">Javier</li>
  </ul>

  <ul>
    <li key="2017">Jona</li>
    <li key="2018">Carlos</li>
    <li key="2019">Javier</li>
  </ul>

React now knows that 2017 key is the new one and the 2018 and 2019 keys have just moved.

Finding a key is not hard. The element that you will be displaying might already have a unique ID. So the key can just come from your data:

  <li key={element.id}>{element...