CODEWITHSUNDEEP
javascriptreactjsreact-native
A.O'Donnell
A.O'Donnell

Reputation: 95

React Native: can I render components from a list individually?

I'm building a CommentList component for my react native app.

I have a json with nested comments, from which I parse and render a list of comment components which have nested child comment components in them.

The problem is that this recursive operation takes way too long.

What I want to do is render one nested comment tree at a time, so that the first nested comment tree shows as soon as it loads, and then goes on to render the other comments.

Currently I do:

return this.state.fetchedComments.map(comment => {
    return <NestedComment key={comment.id} parent={comment} />;
});

which waits until every comment component is created and then renders them all - which takes too long

Upvotes: 1

Views: 676

Answers (1)

Ahmed Wagdi
Ahmed Wagdi

Reputation: 934

When rendering lists in react native (especially big lists) then dont use the map() function to output the list, instead you should use the list components built into react native.

If you're using react native version 0.43 or higher then you have access to the new FlatList component : https://facebook.github.io/react-native/docs/flatlist.html

If not then you're going to have to use the ListView component: https://facebook.github.io/react-native/docs/listview.html

I highly recommend the FlatList component, it's a lot easier to setup and the ListView component will eventually be deprecated in the future.

Upvotes: 1

Related Questions