Warning: Can't perform a React state update on an unmounted component. Firebase React Native

Question

I'm building an app using Expo and Firebase Authentication, when I Log In and Sign Up the user everything works perfectly, but when I log out in the Account.js and the app returns in the Log In Screen it shows the warning: Warning: Can't perform a React state update on an unmounted component, this happens when I log out the user, but also whenever I delete the user from Firebase using auth.currentUser.delete(), I've tried using componentWillUnmount but either I don't use it correctly or it doesn't work.

App.js

export class App extends Component {

  componentDidMount() {
    auth.onAuthStateChanged((user) => {
      if (!user) {
        this.setState({ loaded: true })
        this.setState({ loggedIn: false })
      } else {
        this.setState({ loaded: true })
        this.setState({ loggedIn: true })
      }
    })
  }  

  render() {
    const { loggedIn } = this.state;

    if (!loggedIn) {
      return (
        <Provider store={store}>
          <NavigationContainer>
            <Stack.Screen name="Register" component={RegisterScreen}/>
          <Stack.Screen name="LogIn" component={LogInScreen}/>
          </NavigationContainer>
        </Provider>
    );
    } else {
      return (
        <Provider store={store}>
            <NavigationContainer>
              <Stack.Screen name="TabNavigator" component={TabNavigatorScreen}/>
            </NavigationContainer>
          </Provider>
      )
    }

  }}

export default App;

Account.js

export class Account extends React.Component {

  onSignOut = () => {
    auth
      .signOut()
  }



  render() {
    return (
      <View>
                <CustomButton
                  buttonTxt={'Sign Out'}
                  backgroundColor={'black'}
                  onPress={this.onSignOut}
                  txtColor={'white'}
                />
      </View>
    )
}}

export default Account;

TabNavigator.js

export class TabNavigator extends React.Component {

  componentDidMount() {
    this.props.fetchUser();
  }


  render() {

      return (
        <Tab.Navigator>
          <Tab.Screen
            name="Orders"
            component={OrdersScreen}
          />
          <Tab.Screen
            name="Account"
            component={AccountScreen}
           />
        </Tab.Navigator>

      );
  }
}


export default TabNavigator;

Firebase.js

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getDatabase } from 'firebase/database';


const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxxx",
  databaseURL: "xxxxxxxxxxxxxxxxxxxxx",
  projectId: "xxxxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxxxxxxxxxxx",
  messagingSenderId: "xxxxxxxxxxxxxxxxx",
  appId: "xxxxxxxxxxxxxxx",
  measurementId: "xxxxxxxxxxxxxxxx"

};

let app = initializeApp(firebaseConfig);

const auth = getAuth(app);
const db = getFirestore(app);
const dbMenu = getDatabase(app);
const user = getAuth().currentUser;

export { auth, db, user, dbMenu };

Answer 1

It's just a warning and doesn't affect the app at all, but what it means is that you should remove the subscription so that a setState doesn't happen after the component is unmounted.

    public componentDidMount() {
      this.unsubscribe = firebase.auth().onAuthStateChanged();
    }

    public componentWillUnmount() {
      return this.unsubscribe && this.unsubscribe();
    }