React: Given An Array, Render The Elements In Reverse Order Efficiently

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 e

Solution 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 :))

Solution 2:

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;

Solution 3:

As others have pointed out the humble reverse method does the job for most part. I currently ran into the same issue and I must say that using array.reverse() atleast in Chrome, the performance hit wasnt seen as such. In my opinion its better than using a loop to sort a list in reverse order.

 array.reverse()

Solution 4:

Some how while using array.reverse() the order was changing whenever something in state changed.I went with flexDirection:'column-reverse' which worked fine and you dont need to mess with the array data aswell.

Solution 5:

Add the new elements at the beginning of the array:

array.splice(0,0,'value to add at beginning');

Or call a for loop with an immediately invoked function:

{(() => {
     for(...) {
         return (<i>{whatever}</i>)
     }
})()}