पहले प्रस्तुत करने पर सेटस्टेट के बाद टिप्पणियों का मूल्य कैसे प्राप्त करें?

मुझे यह समस्या हो रही है जहां इस पृष्ठ के पहले रेंडर में टिप्पणियों का मूल्य अपडेट नहीं होता है, लेकिन जब मैं वापस जाता हूं और इस स्क्रीन को फिर से दर्ज करता हूं तो यह अपडेट हो जाता है। मुझे पता है कि यूजस्टेट एसिंक्रोनस है और शायद यही मेरी समस्या पैदा कर रहा है। मैंने केवल एक सप्ताह पहले रिएक्ट नेटिव के साथ शुरुआत की थी और मुझे नहीं पता कि मैं इस मुद्दे को कैसे हल कर सकता हूं। यहाँ मेरा कोड है:

function Comment(props) {
    const [comments, setComments] = useState([])
    const [text, setText] = useState("")

    const textInput = React.createRef();


    const retrieveComments = () => {
        firebase.firestore()
        .collection("posts")
        .doc(props.route.params.uid)
        .collection("userPosts")
        .doc(props.route.params.postId)
        .collection("comments")
        .orderBy("creation","desc")
        .get()
        .then((snapshot)=>{
            let comments= snapshot.docs.map(doc => {
                const data = doc.data()
                const id = doc.id;
                return {id, ...data}
            })
            for(let i=0;i<comments.length;i++){
                if(comments[i].hasOwnProperty("user")){
                    continue
                }
                const user = props.users.find(x => x.uid === comments[i].creator)
                if(user == undefined){
                    props.fetchUsersData(comments[i].creator, false)
                }else{
                    comments[i].user = user
                }
            }
            setComments(comments)
        })
    }

    useEffect(() => {
        retrieveComments()
    },[]);

    useEffect(()=>{
        console.log(comments)
    },[comments.length])



    const onCommentSend = () => {
        firebase.firestore()
        .collection("posts")
        .doc(props.route.params.uid)
        .collection("userPosts")
        .doc(props.route.params.postId)
        .collection("comments")
        .add({
            creator: firebase.auth().currentUser.uid,
            text,
            creation: firebase.firestore.FieldValue.serverTimestamp()
        })
        .then(retrieveComments)
        setText("")
        textInput.current.clear()
    }
    

    return (
        <View style={{flex:1}}> 
            <FlatList   
                numColumns={1}
                horizontal={false}
                data={comments}
                renderItem={({item})=> (
                    <View>
                            {item.user !== undefined && item.creation!==null ?
                                <View style={{marginHorizontal:10, marginVertical:5}}>
                                    <Text style={{fontWeight:'bold'}}
                                    onPress={()=>props.navigation.navigate('Profile',{uid: item.user.uid})}>{item.user.name}</Text>
                                    <Text>{item.text}</Text>
                                    <TimeAgo style={{color:'grey'}}dateTo={item.creation.toDate()}/>
                                </View>
                            :null}
                        <View
                        style={{
                            borderBottomColor: 'silver',
                            borderBottomWidth: 1,
                        }}/>
                    </View>
                )}
            />
            <KeyboardAvoidingView enabled behavior={Platform.select({android: undefined, ios: 'padding'})} keyboardVerticalOffset={64} >
                <View style={{justifyContent:'flex-end', flexDirection:'row'}} behavior="height">
                    <TextInput
                        style={{flex:1}}
                        placeholder="Write a comment..."
                        onChangeText={(text)=> setText(text)}
                        theme={{colors: {text: 'black', primary: 'black'}}}
                        ref={textInput}
                    />
                    <TouchableOpacity
                    onPress={()=>{onCommentSend()}}
                    style={{justifyContent:'center',alignItems:'center', flex:1, backgroundColor:'black'}}>
                        <MaterialCommunityIcons name="send-circle-outline" color='white' size={40}/>
                    </TouchableOpacity>
                </View>
            </KeyboardAvoidingView>
        </View>
    )
}


const mapStateToProps = (store) => ({
    users: store.usersState.users
})
const mapDispatchProps = (dispatch) => bindActionCreators({ fetchUsersData }, dispatch);


export default connect(mapStateToProps,mapDispatchProps)(Comment);

पीएस .: जब मैं उस दूसरे उपयोग को डालता हूं तो यह सही ढंग से लॉग करता है, और मैं इसे हल करने के लिए विचारों से बाहर हूं।

ध्यान देने के लिए आपको धन्यवाद