javascript - 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 choose to reverse the list using reverse(), shift() or splice(), you should make a shallow copy of the array first, and then use that function on the copy. Props in React should not be mutated.

For example:

[...this.props.myList].reverse().map(createListItem, this)

or

this.props.myList.slice(0).map(createListItem, this)

(this should really be a comment, but I don't have the points to do that yet :))