Performance issue with large data: Cells/Rows in the <SectionList/> loading slowly on Android

[xareelee]

TL;DR

With large data, SectionList will:

1. reload the same item repeatedly
2. performance issue on Android (laggy and only update a few item per scrolling)

Is this a bug report?

YES

Have you read the Bugs section of the Contributing to React Native Guide?

YES

Environment

1. react-native -v: 0.45.1 & 0.46.1 (I've tried both versions)

2. node -v: v7.8.0

3. npm -v: 4.2.0

4. yarn --version (if you use Yarn): 0.22.0

5. Target Platform (e.g. iOS, Android): Android

6. Development Operating System (e.g. macOS Sierra, Windows 10): macOS

7. Build tools (Xcode or Android Studio version, iOS or Android SDK version, if relevant): Android SDK 25.0.2

Steps to Reproduce

1. I have a LoginCountryList component to display a SectionList:

export default class LoginCountryList extends React.Component {

  props: LoginCountryListProps;
  static defaultProps = {
    data: {},
  };

  renderRow = (rowItem: any) => {
    console.log('render row:');
    return (
      <TouchableHighlight
        onPress={() => this.props.onSelectRow(rowItem.item)}
      >
        <View style={styles.row}>
          <Text style={styles.rowLeftText}>{rowItem.item.name}</Text>
          <Text style={styles.rowRightText}>{`+${rowItem.item.ccc}`}</Text>
        </View>
      </TouchableHighlight>
    )
  };

  renderSectionHeader = (sectionItem: any) => (
    <View
      style={styles.sectionHeader}
    >
      <Text style={styles.sectionHeaderText}>{sectionItem.section.title}</Text>
    </View>
  );

  render() {

    console.log('re-render section list')
    return (
        <SectionList
          style={styles.listView}
          sections={this.props.data}
          renderItem={this.renderRow}
          renderSectionHeader={this.renderSectionHeader}
        />
    );
  }
}

// data:

const data = [
  // first section
  {
    "title": "A",
    "key": "A",
    "data": [
      // first row
      {
        "ccc": "93",
        "countryCode": "AF",
        "currencyCode": "AFN",
        "currencySymbol": "؋",
        "name": "Afghanistan",
        "key": "AF"
      },
      {
        "ccc": "355",
        "countryCode": "AL",
        "currencyCode": "ALL",
        "currencySymbol": "Lek",
        "name": "Albania",
        "key": "AL"
      },
      ...
    ]
  },
  ...
]

// Use 
<LoginCountryList data={data}/>

2. Running on Android devices
3. Encounter problems (see below)

Expected Behavior

1. Scroll smoothly as running on iOS devices.
2. The same items do not render multiple times.

Actual Behavior

1. Only render a few new rows/cells per scrolling, not smoothly.
2. The method renderRow would be called multiple times for the same row when mounting.

Explanation

I use the new API <SectionList/> to build a list UI, but I found issues running on Android devices.

1. While scrolling down with SectionList, only a few new cells/rows can be displayed at once. You need to scroll SectionList down again to display the next a few new cells/rows, and wait for the next cells are ready to be displayed. It works not the same on the iOS.
2. When reaching the last item in the SectionList, I tried to scroll up quickly to the first item in the SectionList, and it display a blank view with a few seconds till the cells are rendered.

I have hundred rows (country list) for display, and the user experience is bad. The user takes many seconds to reach the last item in the country list, and takes many seconds to show the previous rows after scrolling up quickly.

I tried to log in the renderItem callback when SectionList did display, and it calls renderItem hundred times for displaying only 15 rows in the first section.

Log a constant string render row: with hundred times when the SectionList did display:

Log the indexes of the items when the SectionList did display. The same row did render multiple times when the SectionList did display.

Did use SectionList wrongly? How do I do to fix it?

Reproducible Demo

https://github.com/xareelee/SectionListSlowRenderingOnAndroid

[hramos]

This issue looks like a question that would be best asked on StackOverflow.

StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

Will close this as this is really a question that should be asked on StackOverflow.

[xareelee]

I did follow React-Native docs to use <SectionList/> and it acted differently on iOS and Android.

The docs doesn't demonstrate this behavior on Android, so I think it might be a bug.

[hramos]

I see. If you feel strongly about this being a bug, feel free to open an issue again, but please make sure to follow the bug template. Thanks!

[codingrhythm]

I am experiencing this as well. Adding shouldComponentUpdate and getItemlayout can be helpful. but the FlatList/SectionList is still not usable on Android. As long as there are cells rendering happening (initial render or user scroll triggered), the user interaction or followed up cell rendering is super slow.

My use case is, I have a list of items, and user can select items on tap. Everything works fine on iOS, however, it takes a long time for Android to render cells, which blocks the rendering of the cell that user select. I always need to wait 3-5 seconds for UI to reflect the changes of the selection. If there is not rendering happening, it took about 0.25 ~ 0.5 seconds to show the selected cell. On iOS, everything is real time.

[codingrhythm]

@xareelee have you solved this issue? or you have a bug report created?

[xareelee]

@codingrhythm

UPDATE

Now I've updated this issue by fulfilling the bug report template, and I've also created a Reproducible Demo at https://github.com/xareelee/SectionListSlowRenderingOnAndroid.

How do I reopen this issue?

[xareelee]

@codingrhythm I create a new issue for fulfilling the bug template

#15051

[dopey2]

Try with VirtualizedList

[iwater]

I have the same problem with RN 0.46 on iOS

[LAITONEN]

I seem to have the same issue on iOS. Have >1500 rows to render in the list and sometimes it does not render them all smoothly. It renders the first 10-15 and then freezes. After some time it renders the rest. I did not have this issue with ListView.

[cbjs]

same.