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?

i think using native reverse() method is not a bad idea. in Google Chrome array.reverse is faster than the other methods But, if performance is really a concert, you can use approaches described in the answer here http://stackoverflow.com/questions/5276953/what-is-the-most-efficient-way-to-reverse-an-array-in-javascript — nuway, Jun 06 '16 at 18:13
I think you might be overthinking this. Both of the methods you suggested will run on even large arrays in < 1 ms. Both are far more performant than the `map` you're already using. — Jake Haller-Roby, Jun 06 '16 at 18:47

score 45 · Answer 1 · edited May 18 '18 at 19:58

45

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

edited May 18 '18 at 19:58

Mohammad Kanan

4,452
10
23
47

answered May 18 '18 at 19:35

nutsandbolts

523
4
8

2

worked in 4 seconds. I needed more time to write this comment! thanks! – user3417479 Sep 03 '19 at 15:48
Yes thanks you very much ! I got a blink problem with an array of pictures and you save my design ! – E. Spiroux Sep 05 '19 at 15:29
You Helped me with this code. Thank you. `this.state.ALLProducts.reverse().map((ALLProducts) =>` – Mohamed Raza Jul 24 '20 at 13:03
This method also works with state ```React.useState((current)=>[...current].reverse())``` If you do not use the spread operator it does not work. ("tested" with an array of objects) – Daniel Dec 24 '20 at 21:26

score 34 · Answer 2 · answered Jun 19 '20 at 04:01

34

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;

answered Jun 19 '20 at 04:01

Alfrex92

6,278
9
31
51

1

Didn't think of this one, rather than reverse() , flex-direction worked great. Thank you for this unique solution. – Dhaval Jardosh Nov 21 '20 at 06:24
much appreciated this approach with no additional use of CPU to reverse records – Shivek Parmar Jun 19 '21 at 06:35

score 4 · Answer 3 · answered Oct 27 '17 at 21:20

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()

score 1 · Answer 4 · answered Apr 28 '20 at 15:55

When using mobx as a store one can create a computed property for reversed array that will be reevaluated and memoized each time original observable array changes.

Store

import { observable, computed } from 'mobx';

class MyStore {
  @observable items = [1, 2, 3];

  @computed get itemsReversed() {
    return this.items.slice().reverse();
  }
}

export default MyStore;

Rendering

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';

@inject('myStore') @observer
class List extends Component {
  render() {
    const { myStore } = this.props;
    const { itemsReversed } = myStore;
    return (
      <div className="list">
        {itemsReversed.map(item => (
          <div className="list-item">{item}</div>
        ))}
      </div>
    );
  }
}

export default List;

According to the official documentation this is a preferred way to reverse an array:

Unlike the built-in implementation of the functions sort and reverse, observableArray.sort and reverse will not change the array in-place, but only will return a sorted / reversed copy. From MobX 5 and higher this will show a warning. It is recommended to use array.slice().sort() instead.

score 1 · Answer 5 · answered Jun 25 '20 at 11:36

1

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.

answered Jun 25 '20 at 11:36

Sjonchhe

790
8
16

reverse modify the array, you could have done array.slice().reverse() to reverse a copy of array – Jerome Diaz Apr 20 '21 at 10:46

score 0 · Answer 6 · answered Jun 06 '16 at 18:12

0

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>)
     }
})()}

answered Jun 06 '16 at 18:12

vcanales

1,818
16
20

3

I would prefer array.unshift(val) – juvian Jun 06 '16 at 18:16
True, I don't know why I jumped to `splice` :) – vcanales Jun 06 '16 at 18:18

score 0 · Answer 7 · answered Jun 06 '16 at 19:19

0

Keep pushing at the array, and when rendering, you can simply use the

Array.reverse()

here the documentation

Remind that it will mutate the original one

answered Jun 06 '16 at 19:19

Michael Rasoahaingo

1,069
6
11

score 0 · Answer 8 · answered Dec 03 '22 at 11:25

0

Simply first create copy of array using slice and apply reverse function when using map. For example:

var myArr = [1,2,3,4,5]
myArr.slice(0).reverse().map((element, index) => {
  console.log(element);
});

answered Dec 03 '22 at 11:25

Vikas Bahuguna

19
3

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

8 Answers8

Linked