React: Given an array, render the elements in reverse order efficiently
<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>