title: Getting "Can't perform a React state update on an unmounted component" when switching between screens
body: <p>When switching between the Home.js and Chat.js files, I get this warning: "<em>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</em>". I removed the only listener that's on Chat.js and tried only setting state when the component is mounted in Home.js and removing it on unmount but I still get this warning.</p>
  
  <p>Home.js</p>
  
  <pre><code>import React, { Component } from "react";
  import { View, FlatList } from "react-native";
  import { ListItem } from "react-native-elements";
  import fireStoreDB from "../database/FirestoreDB";
  
  let _isMounted = false;
  
  export default class Home extends Component {
    constructor(props) {
      super(props);
      this.state = {
        usersInfo: [],
        refreshing: false
      };
    }
  
    componentDidMount() {
      _isMounted = true;
      this.LoadUsers();
    }
  
    componentWillUnmount() {
      _isMounted = false;
    }
  
    LoadUsers = () =&gt; {
      fireStoreDB
        .getAllUsersExceptCurrent()
        .then(users =&gt;
          Promise.all(
            users.map(({ id, username, avatar }) =&gt;
              fireStoreDB
                .getUserLastMessage(fireStoreDB.getUID, id)
                .then(message =&gt; ({ id, username, avatar, message }))
            )
          )
        )
        .then(users =&gt; {
          if (_isMounted) {
            this.setState({
              usersInfo: users.filter(x =&gt; typeof x.avatar !== "undefined"),
              refreshing: false
            });
          }
        });
    };
  
    renderItem = ({ item }) =&gt; (
      &lt;ListItem
        onPress={() =&gt; {
          this.props.navigation.navigate("Chat", {
            userTo: item.id,
            UserToUsername: item.username,
            LoadUsers: this.LoadUsers
          });
        }}
        title={item.username}
        subtitle={item.message}
        leftAvatar={{ source: { uri: item.avatar } }}
        bottomDivider
        chevron
      /&gt;
    );
  
    render() {
      return (
        &lt;View&gt;
          &lt;FlatList
            data={this.state.usersInfo}
            renderItem={this.renderItem}
            keyExtractor={item =&gt; item.id}
            refreshing={this.state.refreshing}
            onRefresh={() =&gt; {
              this.setState({ refreshing: true });
              this.LoadUsers();
            }}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>Chat.js</p>
  
  <pre><code>import React, { Component } from "react";
  import { View, KeyboardAvoidingView } from "react-native";
  import { HeaderBackButton } from "react-navigation-stack";
  import { GiftedChat } from "react-native-gifted-chat";
  import * as Progress from "react-native-progress";
  import fireStoreDB from "../database/FirestoreDB";
  
  const Themes = {
    primaryTheme: "#30D921",
    secondaryTheme: "#B32D83",
    layoutTheme: "#c0c0c0"
  };
  
  export default class Chat extends Component {
    static navigationOptions = ({ navigation }) =&gt; ({
      title: navigation.getParam("UserToUsername"),
      headerLeft: (
        &lt;HeaderBackButton
          onPress={() =&gt; {
            navigation.state.params.LoadUsers();
            navigation.goBack();
          }}
        /&gt;
      )
    });
  
    constructor(props) {
      super(props);
      this.state = {
        messages: [],
        userToId: this.props.navigation.getParam("userTo")
      };
    }
  
    componentDidMount() {
      fireStoreDB.getMessages(
        message =&gt;
          this.setState(previousState =&gt; ({
            messages: GiftedChat.append(previousState.messages, message)
          })),
        this.chatId
      );
    }
  
    componentWillUnmount() {
      fireStoreDB.removeSnapshotListener(this.chatId);
    }
  
    // gifted chat user props
    get user() {
      return {
        _id: fireStoreDB.getUID,
        name: fireStoreDB.getName,
        avatar: fireStoreDB.getAvatar
      };
    }
  
    // merge ids between two parties for one to one chat
    get chatId() {
      const userFromId = fireStoreDB.getUID;
      const chatIdArray = [];
      chatIdArray.push(userFromId);
      chatIdArray.push(this.state.userToId);
      chatIdArray.sort(); // prevents other party from recreating key
      return chatIdArray.join("_");
    }
  
    render() {
      if (this.state.messages.length === 0) {
        return (
          &lt;View
            style={{
              alignItems: "center",
              marginTop: 260
            }}
          &gt;
            &lt;Progress.Bar indeterminate color={Themes.primaryTheme} /&gt;
          &lt;/View&gt;
        );
      }
      return (
        &lt;View style={{ flex: 1 }}&gt;
          &lt;GiftedChat
            messages={this.state.messages}
            onSend={messages =&gt; fireStoreDB.sendMessages(messages, this.chatId)}
            user={this.user}
          /&gt;
          &lt;KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={80} /&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>FirestoreDB.js</p>
  
  <pre><code>  removeSnapshotListener = chatId =&gt; {
      firebase
        .firestore()
        .collection("messages")
        .doc(chatId)
        .collection("chats")
        .orderBy("createdAt")
        .onSnapshot(() =&gt; {});
    };
  </code></pre>