Delay rendering large data sets while using Cell

[thunderousNinja]

While using the Cell component of the library I noticed that there is large delay if I initialize it with a large amount of data. It takes about 3-5 seconds to render.

I am doing something like this in my component with 1000 dummy elements initialized:

  var faker = require('faker');

  var LOREM_IPSUM = 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.';

  componentWillMount: function() {
    this.data = this.generateData();
  },

  generateData: function() {
    var data = [];
    for (var i = 0; i < 1000; i++) {
      data.push({
        image: faker.image.avatar(),
        title: ("ROW: " + i + " - " + LOREM_IPSUM)
      });
    }
    return data;
  },

  render: function() {
    let items = this.data.map((data) => (<Cell>
                        <Text>{data.title}</Text>
                    </Cell>));
    return (
            <TableView style={{flex:1}}
                       tableViewStyle={TableView.Consts.Style.Plain}
                       tableViewCellStyle={TableView.Consts.CellStyle.Subtitle}
                       onPress={(event) => console.log(event)}>
                <Section arrow={false}>
                    {items}
                </Section>
            </TableView>
        );
  },

This issue is not reproducible if I change my implementation to be Item, rather than Cell, for large data sets. Before I start digging into the source I wanted to know if this is a known limitation with Cell (slowness with initializing large data sets).

[aksonov]

Yes, it is known limitation and i don't have idea how to avoid it. Now Cell should be used only for small datasets. Check built-in ListView component, it have almost the same issues (big delay for rendering)!

[thunderousNinja]

I think what you said should be rephrased as:

Now Cell should be used only for small initial datasets

Large data sets should be supported with Cell, otherwise what is the point of having a UITableView wrapper component! I guess the concerns would be how to properly append, prepend, or delete data to the collection... I guess the use case for this would be a an infinite collection of reddit posts. Hypothetically a user can scroll through hundreds of posts, via infinite paging. We probably shouldn't re-render all of the Cell components if we are appending, removing, or prepending from the data provider. What are your thoughts on this?

[aksonov]

Yes, it is quite tricky to solve as you mentioned, but you are welcome to do PR for this! I thought to create some kind of factory of Cells and re-use cells like UITableView does - but i don't see way how to pass view factory from JS to native code (because of async nature). Another way is to 'clone' Cell view when necessary, but it is not clear how to nicely clone UIView and how to set new values there.

The point of having this component now is to use built-in cells types for some simple scenarios, like menus or list of countries/states. Maybe solving of #21 will add possibility to use it for simple 'settings' forms.

[thunderousNinja]

Good points. I will try something out this weekend, once I have some free time.

Great job on the lib btw. Excited to finally get some view recycling with react-native ♻️

[thunderousNinja]

I recommend making this an enhancement label maybe?

[nyura123]

Making cells reusable might help with this. Check out "LargeTableExample" in TableViewDemo for a large data set, and "FirebaseExample" for an example of loading dynamic data (the reusable cell feature is currently on https://github.com/nyura123/react-native-tableview)