title: React Native - Fetch api inside component on a Flatlist
body: <p>I'm creating an app that has threads of comments (like reddit) and right now the lag is really big.</p>
  
  <p>The really simplified idea is basically:</p>
  
  <p>I have an <code>array</code> with the id of comments <code>[01, 02, 03, n]</code> </p>
  
  <pre><code>&lt;ParentComponent&gt;
    &lt;Flatlist 
      data={array}
      renderItem={(commentId) =&gt; &lt;CommentComponent commentId={commentId} /&gt;}
    /&gt;
  &lt;/ParentComponent&gt;
  </code></pre>
  
  <p>Inside <code>&lt;CommentComponent /&gt;</code> I'm making a request with the id and fetching the content to render </p>
  
  <pre><code>const CommentComponent = ({ commentId }) =&gt; {
    const [comment, setComment] = React.useState({});
  
    useEffect(() =&gt; {
      const c = getComment(commentId)
      setComment(c)
    })
  
    return (
      &lt;View&gt;
        &lt;Text&gt;{comment.text} /&gt;
        &lt;Flatlist 
         data={comment.arrayComments}
         renderItem={(commentId) =&gt; &lt;CommentComponent commentId={commentId} /&gt;}
        /&gt;
      &lt;/View&gt;
  }
  </code></pre>
  
  <p>The answer from the call is the text of the comment with the comments to this comment</p>
  
  <pre><code>{
    text: 'Lorem ipsum',
    comments: [05, 06, 07, 08, n]
  }
  </code></pre>
  
  <p>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 <code>&lt;Flatlist /&gt;</code> inside a <code>&lt;Flatlist /&gt;</code> inside a <code>&lt;Flatlist /&gt;</code> ...</p>
  
  <p>And each of the items inside the <code>&lt;Flatlist /&gt;</code> needs to call a render so i'm getting an absurd amount of renders</p>
  
  <p>Some of this threads have 3 digits comments, how can I make this in a more smarter way?  </p>
  
  <p>I'm thinking that I have to make this fetchs outside every <code>&lt;CommentComponent /&gt;</code>, but it can take a long time to get all of those comments and it does not feel right.</p>
  
  <p>Anyone has any idea of how can I make this work without getting this absurd lag while scrolling?</p>