Can't call setState on an unmounted component using firebase auth in react native

Question

I have this warning that show up on every reload, I dont know how to debug it, I fetched a little on internet, all I found is declaration of this.mounted and use if statement to setState when it's true, I implemented it didn't work, please someone take a look at my code and let me know what's going on, on github people using firebase authentication face similar issues, I am still searching on those buried issues

export default class Login extends Component {
static navigationOptions = { header: null };
  constructor(props) {
     super(props)
     this.state = {
       currentUser: '',
       loading: false,
       error: null,
       UserInput: "",
       loggedIn: null,
       loggedOut: null,
       email: '', password: '',
     }
   }

   componentDidMount = () => {
     this.setState({ loading: true });
     firebase.auth().onAuthStateChanged((user) => {
       if(user) {
         const { navigate } = this.props.navigation;
         navigate('SponsorScreen')
         this.setState({ loggedIn: true, loggedOut: false, loading: false  });
       }
       else {
         this.setState({ loggedIn: false, loggedOut: true, loading: false });
       }
     });
    }

  onLogIn = () => {
    this.setState({ loading: true });
    const { email, password } = this.state;
    Keyboard.dismiss()
    firebase.auth().signInWithEmailAndPassword(email, password)
    .then(this.onSuccess.bind(this))
    .catch(() => {
      this.refs.modal.open();
      this.setState({ loading: false });
    })
  };

  onSignUp = () => {
    const { email, password } = this.state;
    this.setState({ loading: true });
    Keyboard.dismiss()
    firebase.auth().createUserWithEmailAndPassword(email, password)
    .then(this.onSuccess.bind(this))
    .catch(() => {
      this.refs.modal.open();
      this.setState({loading: false});
    })
  };

  onSuccess() {
    this.setState({
      email: '',
      password: '',
      loading: false,
      error: ''
    });
  };


render() {
  const { navigate } = this.props.navigation;
  return (

hey bro take a look at these: https://stackoverflow.com/questions/40295315/warning-about-calling-setstate-on-an-unmounted-component https://stackoverflow.com/questions/50774743/cant-call-setstate-on-an-unmounted-component — Harrison, Oct 01 '18 at 23:04

score 2 · Accepted Answer · answered Oct 01 '18 at 23:21

In componentDidMount, after firebase.auth success, you must navigate after setstate successfully executed by using the setstate callback

componentDidMount = () => {
 this.setState({ loading: true });
 firebase.auth().onAuthStateChanged((user) => {
   if(user) {
     const { navigate } = this.props.navigation;

     this.setState({ loggedIn: true, loggedOut: false, loading: false  }, () => {
         navigate('SponsorScreen')
     });
   }
   else {
     this.setState({ loggedIn: false, loggedOut: true, loading: false });
   }
 });
}

Can't call setState on an unmounted component using firebase auth in react native

1 Answers1