How I rendered news feeds additionally using FlatList in React-native

Rendering additonally using FlatList in React-Native

I had a chance to work with a start-up company and I was in charge of making news feeds page like Instagram showing posts and comments of my followers. I made ‘add comments’, ‘like & unlike’, ‘delete’, ‘read more’ features, but it was a little bit slow when I execute these features after rendering all posts. I wrapped up briefly the way I solved this problem.

Problems :

1. I suffered from rendering problem, because it became slow when there are news feeds more than 40.

Circumstances :

1. React-native
2. Android studio (It was slower when operating on Android studio than Xcode which my teammate used.)
3. Firebase entity to fetch data
4. Ubuntu 18.04

Tried :

1. Rendering minimum amounts of news feeds when loading first and rendering 6 news feeds additionally when scrolling down.

Before :

It rendered more than 39 news feeds at once when loading first, and it was still working below the screen showing only 2 or 3 news feeds to load rest news feeds. This makes actions like ‘Delete’, ‘Read More’ on screen slower.

class FeedCommentList extends Component<Props, State> {
state: State = { isLoading: true };
...
render() {
      const { commentsByMyCreators, uId } = this.props;  
      const commentsByTime 
      = orderBy(commentsByMyCreator,['commentedAt'], ['desc'])
...
  return (
    <FlatList 
     data={commentsByTime}
     keyExtractor={this._keyExtractor}
     renderItem={({item}) => {
     return <FeedCommentItem comment={ item } uId={uId} />}}
    />
...    
  )}
}

After :

It’s rendering first 6 news feeds and call 6 additional feeds when I scroll down. Now I can execute actions like ‘Delete’, ‘Like’ faster.

class FeedCommentList extends Component<Props, State> {
state: State = { 
  isLoading: true, 
  number: 6
};
...
roadMore = () => {
  this.setState({number: this.state.number + 6})
}
...
render() {
      const { commentsByMyCreators, uId } = this.props;  
      const commentsByTime 
      = orderBy(commentsByMyCreator,['commentedAt'], ['desc'])
      .slice(0, this.state.number)
...
  return (
    <FlatList 
     data={commentsByTime}
     keyExtractor={this._keyExtractor}
     onEndReached={this.roadMore}
     renderItem={({item}) => {
     return <FeedCommentItem comment={ item } uId={uId} />}}
    />
...
  )}
}

Next Works:

1. Figure out how to execute ‘setState’ faster than now.
2. Try not to use ‘setState’ and find replacement for it.

I am blogging what I’ve learned to find later here for myself. If you happened to read this shit and there is wrong information, it would be appreciated to add a comment below.