title: React: Given an array, render the elements in reverse order efficiently
body: <p>I currently render a list in the typical React-style. The list is passed as an array prop, and I map over it like so:</p>
  
  <pre><code>{this.props.myList.map(createListItem, this)}
  </code></pre>
  
  <p>So when a new element is added, it appears like the latest item was added to the end of the list.</p>
  
  <p>I would like it so the latest item appears at the top. i.e. everything appears in reverse-chronological order.</p>
  
  <p>The two options I've come up with so far are:
  1) Reverse the list, creating a new array each time something is added, and pass this reversed list as the prop.
  2) Use shift.</p>
  
  <p>But they're both unappealing because of performance.</p>
  
  <p>I'm not aware of Javascript supporting mapping in reverse order. I've been trying a for-loop but I haven't been able to get it to work.</p>
  
  <p>What is the idiomatic way to render an array in reverse order in React?</p>