React: Given an array, render the elements in reverse order efficiently

Question

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:

{this.props.myList.map(createListItem, this)}

So when a new element is added, it appears like the latest item was added to the end of the list.

I would like it so the latest item appears at the top. i.e. everything appears in reverse-chronological order.

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.

But they're both unappealing because of performance.

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.

What is the idiomatic way to render an array in reverse order in React?

Answer 1

If you need to display a list in the UI in reverse order you can also use

flex-direction: row-reverse;

or

flex-direction: column-reverse;