ListView component easily displays performance issues

[jaygarcia]

Team: This type of performance issue is something that will not be accepted by the community when this thing launches. The slowest HTML5 frameworks can render items way faster than this.

Demo: http://www.screencast.com/t/mQpzX1ZAE2

This issue can be replicated on an iPhone6.

[nick]

Jay, I'm pretty sure your implementation is funky if you're getting that type of performance. Are you sure you're doing things the 'React' way?

[amccloud]

@jaygarcia Can you share an example project I can run on my device?

[jaygarcia]

@nick -- If the 'React way' isn't what's in the examples (or below), I don't know what is.

@amccloud, the below gist is a /slightly/ modified version of the UIExplorer's "ListViewSimpleExample.js" file, removing the need for "UIExplorerPage"

https://gist.githubusercontent.com/jaygarcia/e3e6dd0a2e71cf7ffd7b/raw/0f9ccee35448c1e6b0fc7374decc4b4bfddc019e/gistfile1.js

The following is the root view, implements "ListView.js" (above).

'use strict';

var React = require('react-native'),
    styles = require('./Styles'),
    MyListView = require('./ListView.js');

var {
    AppRegistry,
    View,
    Text,
    TouchableHighlight
} = React;


var DemoApp = React.createClass({
    render : function() {
        var me = this;
        return (
            <View style={styles.container}>
                <MyListView></MyListView>
            </View>
        );
    }
});

AppRegistry.registerComponent('DemoApp', () => DemoApp);

module.exports = DemoApp;

[ide]

I believe the ListView renders one cell at a time after the initial render. You can tell it to render 100 cells per rAF or ensure the data source is populated the first time you render the ListView.

[jaygarcia]

Fantastic. Just noticed the following in the ListView.js file.

  getDefaultProps: function() {
    return {
      initialListSize: DEFAULT_INITIAL_ROWS,
      pageSize: DEFAULT_PAGE_SIZE,
      scrollRenderAheadDistance: DEFAULT_SCROLL_RENDER_AHEAD,
      onEndReachedThreshold: DEFAULT_END_REACHED_THRESHOLD,
    };
  },

[jaygarcia]

Resolved via the following

<ListView dataSource={this.state.dataSource} initialListSize={100} renderRow={this._renderRow}/>

Though, DEFAULT_INITIAL_ROWS should probably be > 15 or so in Components/ListView/ListView.js

[sahrens]

Yeah, ideally we could figure more of this out automatically rather than you needing to tweak the params manually. The defaults are optimized for Groups which have much taller rows.

On Mar 5, 2015, at 4:44 PM, Jay Garcia notifications@github.com wrote:

Closed #127.

—
Reply to this email directly or view it on GitHub.

[sahrens]

We're also probably going to simplify and further optimize this component significantly in the not-so-distant future - if anyone wants to take a stab at it, we were thinking of simply relying on the row components' shouldComponentUpdate methods instead of the DataSource, etc.

On Mar 5, 2015, at 4:44 PM, Jay Garcia notifications@github.com wrote:

Closed #127.

—
Reply to this email directly or view it on GitHub.