Navigation issue - can't perform a React state update on unmounted component

Question

I am getting

ExceptionsManager.js:94 Warning: Can't perform a React state update 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. in TabView (at createMaterialTopTabNavigator.js:248)

It only happens when I am trying to render a screen with createMaterialTopNavigator. I am speculating that my issue maybe with how I have constructed my navigation page. I am open to other options in reconfiguring my navigation!

I've tried this.setState({signedIn:false}), this.AuthorizeFireBaseUser() in my componentWillUnmount, but all have been unsuccessful.

Router.js (where all my navigation/screens take place)

const SignedOut =  createStackNavigator({
    SignIn:{screen:SignIn},
    CreateAccount:{screen:CreateAccount},
    Profile:{screen:Profile}
  });

  const SignedIn = createMaterialBottomTabNavigator({
   Home:{screen:Main},    //where my top tab navigator lives
   Profile:{screen:Profile}
  });


class Router extends React.Component{
    constructor(){
        super();
        this.state={
            signedIn:false,
        }
    }

    RootNavigator = (signedIn)=>{
        return createSwitchNavigator({
            SignedIn:{screen:SignedIn},
            SignedOut:{screen:SignedOut}
        },
        {
            initialRouteName: this.state.signedIn ? "SignedIn" : "SignedOut"  //if signedIn is true head to signedIn else head to SignOut screens
        });


    }

    AuthorizeFirebaseUser(){
        firebase.auth().onAuthStateChanged(user=>{
            if(user){
              this.setState({signedIn:true});
            }
        });

    }

    componentDidMount(){ //Checking if user is signed in will run in background upon loading
       this.AuthorizeFirebaseUser(); //if user is signed in set state to true 
    }

    componentWillUnmount(){
      // unsure what to unmount 
    }

    render(){
        const {signedIn} = this.state;
        const Layout = createAppContainer(this.RootNavigator(signedIn)); // when this page renders it'll call the rootnav function - check state , and render the appropriate screens 
        return <Layout />

    }
}//end bracket
export default Router;

The class Router returns Layout that calls function RootNavigator to determine which screens to show depending if user is logged in.

Main.js - is where my createMaterialTopNavigator lives and will render two main pages. I call Main.js in const = SignedIn → in Home screen

const Tabs = createMaterialTopTabNavigator({
    Newsfeed:{screen: Newsfeed},
    Services:{screen:Services}
},
{
    initialRouteName:'Services',
    swipeEnabled:true,
    navigationOptions:({navigation})=>({
         header:null

    }),
    tabBarOptions:{
        activeTintColor:'#65FAE9',
        inactiveTintColor:'white',
        allowFontScaling:true,
        indicatorStyle:{borderBottomColor:'#65FAE9', borderBottomWidth:4,},
        style:{backgroundColor:'#515276'},
        labelStyle:{marginTop:'40%',fontSize:15},  
    },     
 },

);

export default Tabs;

App.js

export default class App extends React.Component {
  render() {
    return <Router />
  }
}

I'm unsure how to fix this warning, memory leaks are never good. I am open to all suggestions in fixing my navigation structure, as I believe that may be the issue.

score 0 · Answer 1 · edited Apr 08 '20 at 13:28

setState() is asynchronous, so I think your component is getting unmounted before setState() finishes setting the state.

You can use a variable to keep track and check whether the component is still mounted or not.

isMounted = false // Initially

componentDidMount() {
    this.isMounted = true;
}

componentWillUnmount() {
    this.isMounted = false;
}

Now use setState() only after verifying that isMounted is still true.

Navigation issue - can't perform a React state update on unmounted component

1 Answers1