Can't perform a React state update on an unmounted component #434

Question

Im trying to add step to realtime database firebase. When I add the step, it works in the database but then the modal closes and I dont have any error but the modal closes without any reason

I think the problem is when I call the firebase to update it (in addTodo function), but I have no ideas why.

TodoModal.js :

  componentDidMount = async () => {
    this.mounted = true;
  };

  compunentWillUnmount = () => {
    this.mounted = false;
  }

  addTodo = async () => {
    if (this.state.newStep !== "") {
       try {
        await firebase
          .database()
          .ref("Tasks")
          .child(firebase.auth().currentUser.uid).child(firebase.auth().currentUser.uid)
          .child(this.props.task.taskname)
          .child("Steps")
          .child(this.state.newStep)
          .update({ title: this.state.newStep, status: false, dateAdd: date });
        this.props.addStep({ title: this.state.newStep, status: false, dateAdd: date }); 
        if (this.mounted) {
          this.setState({ newStep: "" });//to reinitialize the newStep field
        }

      } catch (error) {
        console.log(error);
      } 
    } else {
      Alert.alert("","field is required");
    }
  };
  };




  render() {
    return (
            <View>
              <TextInput
                onChangeText={(text) => this.setState({ newStep: text })}
                value={this.state.newStep}
              />
              <TouchableOpacity
                onPress={() => this.addTodo()}
              >
              </TouchableOpacity>
            </View>
    );
  }
}

);

TodoTask.js :

render() {
    const task = this.props.task;
    return (
      <View>
        <Modal
          animationType="slide"
          visible={this.state.showTaskVisible}
          onRequestClose={() => this.toggleisModal()}
        >
          <TodoModal task={task} closeModal={() => this.toggleisModal()} />
        </Modal>
       </View>
      )

Answer 1

That error happens when an async function ends and the component that triggered that function was unmounted, so the result of the async function tries to update the state of something that is not there anymore.

Usually, to prevent this, you have to either reject the promise OR check if the component is still mounted before trying to modify its state.

You could keep track of the mounted state doing something like

componentDidMount = () => {
  this.mounted = true;
}

compunentWillUnmount = () => {
  this.mounted = false;
}

then you can check if this.mounted before trying to change the state.