SectionList Performance iOS

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS High Sierra 10.13.1 Node: 8.0.0 Yarn: 1.3.2 npm: 5.5.1 Watchman: 4.7.0 Xcode: Xcode 9.1 Build version 9B55 Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed) react: ^16.1.1 => 16.1.1 react-native: ^0.50.3 => 0.50.3

Target Platform: iOS (11.1)

Steps to Reproduce

We’re having quite a big app completely build with react-native. For navigation we’re using react-navigation and for the store redux. As you will see in the following .gif and when you run my example, the performance of our SectionList is really bad. To mention, it’s a long list with different sections, sectionheaders and so on, but I can’t find the cause of this really bad performance. If I’m testing the app with the PerfMonitor, I’m seeing the UI Thread is dropping frames, the JS thread doesn’t have a problem. If I understand things right, then this means that this is not a bug in my JS integration. Is this suggestion right?

(to clarify the performance is not only bad in debug mode, it’s also bad on release and on every device I’ve tested it. (iPad, iPhone 6, iPhone 7))

So steps to reproduce:

1. Build a large SectionList with different sections
2. Scroll through the list
3. Press on items

Expected Behavior

The SectionList should scroll smooth up and down, items can get pressed, just as you would expect it from an app you already know.

Actual Behavior

Really bad performance by scrolling up and down, stocking transitions

Debug Mode with PerfMonitor:

Release Mode: (same happens on every test device)

Reproducible Demo

A snack doesn’t make really sense in this case, so I uploaded the relevant parts to a new github repository. You can get it here https://github.com/vanBrunneren/Bug.git (obviously some parts are removed because I can’t show the full code, but the example should show the problem). To see the problem just download and install my demo, start the app, and scroll through it.

Additional information

Maybe a list of my dependency is also helping:

"dependencies": {
    "bugsnag-react-native": "^2.6.0",
    "prop-types": "^15.5.10",
    "react": "^16.1.1",
    "react-native": "^0.50.3",
    "react-native-camera": "^0.10.0",
    "react-native-carousel": "^0.10.0",
    "react-native-device-info": "^0.11.0",
    "react-native-fabric": "^0.5.1",
    "react-native-facebook-login": "^1.6.0",
    "react-native-google-analytics-bridge": "^5.3.3",
    "react-native-htmlview": "^0.12.1",
    "react-native-maps": "^0.17.1",
    "react-native-push-notification": "^3.0.1",
    "react-native-qrcode-scanner": "^0.0.23",
    "react-native-radio-buttons": "^1.0.0",
    "react-native-render-html": "^3.5.1",
    "react-native-send-intent": "^1.0.21",
    "react-native-swiper": "^1.5.13",
    "react-native-tab-view": "^0.0.70",
    "react-native-vector-icons": "^4.4.2",
    "react-navigation": "^1.0.0-beta.21",
    "react-redux": "^5.0.6",
    "redux": "^3.6.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-jest": "21.2.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "21.2.1",
    "react-test-renderer": "16.0.0"
  },

If I run the same on android it’s performing perfectly. The only difference between iOS and android is the navigation structure. On iOS i’m having a TabNavigator and on Android I’m having a DrawerNavigator. But in my opinion this should not be a problem because these problems are always there and are seen without any routing. I made quite the same with a ListView but in fact of replacing ListView through SectionList this performance issues occurred.

If you need additional information or if I can explain something more deeply, let me know.

[bolan9999]

FlatList and SectionList is bad performance. Try this,please. may be it is a surprise for you

https://github.com/bolan9999/react-native-largelist

[vanBrunneren]

I have now managed to get a good performance by rethinking and mostly rewriting a lot of my components. It was a huge time consuming process but now I’m having a performant app again. The frustrating thing was, with ListView everything performed very well and as the relaese notes sayed FlatList and SectionList are more performant than the old ListView I had to change several things to get a good performance again. I hope for the future, I don’t have to rewrite so much components because of a concept change in react-native.

@bolan9999 your plugin is very well and i would wish react-native would adapt some concepts, but it’s always a little bit of a risk with such plugins. Because I’m having a very large app and if sometime your plugin isn’t supported anymore or react-native gets changed and there is a huge update to do on your site and then on my site, its always a mess. I had alot of these updates and problems in the past 2 years of developing a very large app in react-native.

I’m closing this issue. For everyone with the same problem:

• read the docs section “performance”
• think of how you made your components
• rethink how you made your components
• read the docs section “performance” again
• keep your components simple
• shouldComponentUpdate is your fried (read exactly how this works and whats the benefit of it)