React Native - Fetch api inside component on a Flatlist

Question

I'm creating an app that has threads of comments (like reddit) and right now the lag is really big.

The really simplified idea is basically:

I have an array with the id of comments [01, 02, 03, n]

<ParentComponent>
  <Flatlist 
    data={array}
    renderItem={(commentId) => <CommentComponent commentId={commentId} />}
  />
</ParentComponent>

Inside <CommentComponent /> I'm making a request with the id and fetching the content to render

const CommentComponent = ({ commentId }) => {
  const [comment, setComment] = React.useState({});

  useEffect(() => {
    const c = getComment(commentId)
    setComment(c)
  })

  return (
    <View>
      <Text>{comment.text} />
      <Flatlist 
       data={comment.arrayComments}
       renderItem={(commentId) => <CommentComponent commentId={commentId} />}
      />
    </View>
}

The answer from the call is the text of the comment with the comments to this comment

{
  text: 'Lorem ipsum',
  comments: [05, 06, 07, 08, n]
}

I'm using recursion to render the comments of the comment, everything works fine except for the absurd lag that I get from rendering a <Flatlist /> inside a <Flatlist /> inside a <Flatlist /> ...

And each of the items inside the <Flatlist /> needs to call a render so i'm getting an absurd amount of renders

Some of this threads have 3 digits comments, how can I make this in a more smarter way?

I'm thinking that I have to make this fetchs outside every <CommentComponent />, but it can take a long time to get all of those comments and it does not feel right.

Anyone has any idea of how can I make this work without getting this absurd lag while scrolling?

score 0 · Answer 1 · answered Dec 18 '19 at 23:34

0

You should render items when user scroll to it. Please read optimize-flatlist to simplify

please use

 <Flatlist 
   keyExtractor={(item,index) => index.toString()} // don't forget keyExtractor
   initialNumToRender={10} // Vary According to your screen size take a lumsum according to your item height
   removeClippedSubviews={true}
/>

also read performance-issues-with-react-native-flatlist-with-100-list-items

answered Dec 18 '19 at 23:34

Abanoub Istfanous

856
9
24

Thanks for your answer, my is using a bunch of others props like keyExtractor, initialNumberToRender, removeClippedSubviews, maxToRenderPerBatch, updateCellsBatchingPeriod but after rendering the second or third child of comments still everything gets really laggy. I removed the props just for the sake of simplicity – ribas Dec 18 '19 at 23:45

score 0 · Accepted Answer · answered Dec 19 '19 at 00:12

I just can't believe it, 3 days with this problem and the solution has to be the strangest thing in React Native so far, I just removed the borderRadius from the Views and everything now is perfect, anyone has any idea why borderRadius would create a lag like that?

React Native - Fetch api inside component on a Flatlist

2 Answers2