Component not updating after useEffect call-CodePudding

I am trying to delete an Item from my database using a Modal and then show the list of item remaining.

Everything works, my item is deleted correctly, but my component update only when I navigate to it, it's not updating after my modal is closed.

I want my component to refresh after my modal is closed.

Here is my code:
My modal:

<Modal visible={modalOpen} transparent={true} animationType='fade'>
  <View>
    <TouchableOpacity onPress={() => deleteMachineFunction()}>
         <Text style={styles.delete}>Delete</Text>
    </TouchableOpacity>
  </View>
</Modal>

my deleteMachineFunction() which is called after pressing 'Delete'

    const deleteMachineFunction = () => {
        dispatch(deletemachine(machineId))

        firebase.firestore()
        .collection('users')
        .doc('WDaEyHg9wMhqFjqA1zzeYaD6sts1')
        .update({
            userMachineList: firebase.firestore.FieldValue.arrayRemove(machineId)
        })
        //close modalle modal
        setModalOpen(false)
    }

So above, my modal useState (modalOpen, setModalOpen) is updating true to false.

Here is my useEffect hook:

   useEffect(() => {
        const unsubscribe = navigation.addListener('focus', () => {
            firebase.firestore()
            .collection("users")
            // .doc(firebase.auth().currentUser.uid)
            .doc('WDaEyHg9wMhqFjqA1zzeYaD6sts1')
            .get()
            .then((snapshot) => {
                if(snapshot.exists){
                   setCloudUserMachineList(snapshot.data().userMachineList)
                } else {
                    console.log('not working')
                }
            })
        });
    
        // Return the function to unsubscribe from the event so it gets removed on unmount
        return unsubscribe;

      }, [navigation, modalOpen]);

I was thinking by putting modalOpen in the useEffect array, my Component will update automatically after modalOpen turn to false but it's not working.

Can someone tell me what I am doing wrong?

CodePudding user response：

Since you call get(), you're only getting the data once. If the data is updated after that, your setCloudUserMachineList won't be updated.

If you want to listen for updates to the data, use onSnapshot instead of get():

useEffect(() => {
    firebase.firestore()
    .collection("users")
    .doc('WDaEyHg9wMhqFjqA1zzeYaD6sts1')
    .onSnapshot((snapshot) => { //