How to get value from another function inside react native flatList?

Question

I am trying to filter out posts from the blocked users. What is the best way to approach it? as state update is making the app laggy. This is the way I am approaching it :

I made a function to check if user is blocked

checkBlocked = async userId => {
  try {
  let snapshot = await firebase.database().ref('Blocked/' + firebase.auth().currentUser.uid).orderByChild('uid').equalTo(userId).once('value')
    return snapshot.exists();
  }
  catch(error) {
    return false;
  }
}

Then inside flatlist, I'm trying to filter the posts from users one has blocked.

<FlatList
        inverted
        extraData={this.state.blocked}
        data={this.state.arrData}
        keyExtractor={item => item.key}
        renderItem={({ item }) => {
         
         
          this.checkBlocked(item.id).then(val => this.setState({blocked: val}));
         
            if(this.state.blocked == true){
              return (
                 //something )
            }

          else {
             
          return (

           //something 
             
     

       )}

      }}
     
      />

Answer 1

You can't start asynchronous operations (such as loading data from Firestore) from the render method like that. You should:

1. start the asynchronous operation outside of the render method.
2. when you get the result from that operation, put it in the component's state.
3. this will trigger a rerender of your component, where the render method can get the data from the state.

See my answer here for an example: React Not Updating Render After SetState