Warning: Can't call setState (or forceUpdate) in React Native

Question

I have SignUp.js file. When I click on the SignUp button, I redirect to the home page but with the warning. What is causing this warning and what is the best way to repair properly.

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

import ...

const INITIAL_STATE = {
  username: "",
  email: "",
  passwordOne: "",
  passwordTwo: "",
  errorMessage: null
};

export default class Signup extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = { ...INITIAL_STATE };
  }


  handleSignUp = () => {
    const { username, email, passwordOne } = this.state;
    const { history } = this.props;
    auth.doCreateUserWithEmailAndPassword(email, passwordOne)
      .then(authUser => {
        // Create a user in your own accessible Firebase Database too
        db.doCreateUser(authUser.user.uid, username, email)
          .then(() => {
            this.setState({ ...INITIAL_STATE });
            this.props.navigation.navigate("MainScreenNavigator");
          })
          .catch(error => this.setState({ errorMessage: error.message }));
      })
      .catch(error => this.setState({ errorMessage: error.message }));
  };

  goBack() {
    Actions.pop();
  }

  render() {
    const {
      username,
      email,
      passwordOne,
      passwordTwo,
      errorMessage
    } = this.state;

    const isInvalid =
      passwordOne !== passwordTwo ||
      passwordOne === "" ||
      email === "" ||
      username === "";
    const display = isInvalid ? "none" : "flex";

    return (
      <View style={styles.container}>

        <KeyboardAvoidingView>
          <TextInput.../>
          <TextInput.../>
          <TextInput.../>
          <TextInput.../>

        </KeyboardAvoidingView>

        <TouchableOpacity style={[styles.button, { display }]}>
          <Text style={styles.buttonText} onPress={this.handleSignUp}>
            Sign up
          </Text>
        </TouchableOpacity>

        {this.state.errorMessage && (
          <Text style={{ color: "#b71c1c", textAlign: "center" }}>
            {this.state.errorMessage}
          </Text>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({      ...    });

I know this question is asked before but it's working for me.

Answer 1

Try binding the function that you are updating the state, in your components' constructor. You may want to read this.

Answer 2

Seems like the warning is coming from one of the Catch functions of the component. The function doesn't resolve properly, and then tries to setState but you've already navigated to a different page. Instead of calling .catch(error => this.setState({ errorMessage: error.message }));

Try something like .catch(error => console.warn(error));

Although its not clear why it does it, but the logs would tell you what's happening most likely.