title: React Native: How to prevent state reset when changing screens?
body: <p>I am having trouble when changing screens after the user access a card. The component set of states resets whenever the client accesses a card, changes the screen, and returns to the same component before.</p>
  <p>Here is how the app works. The client access a list of quotes (QuotesRequestedListScreen) that they requested. This said list is loaded from Firebase, and thus the state to indicate loading activity is set to true at first. After the load finishes, then the app shows all the data in cards. After the client clicks on the card, it changes the screen and displays the card info. However, if the client returns to the previous screen, the screen shows the loading activity icon forever until changing screens again.</p>
  <p>I have tried to use <a href="https://reactnavigation.org/docs/state-persistence" rel="nofollow noreferrer">State Persistance given by React Navigation</a>, but it did not work when I was trying to return to the quote list screen (QuotesRequestedListScreen).</p>
  <p>Does someone know what is the best way to keep the states when changing screens? Thanks!</p>
  <p><strong>Main Quote Screen</strong></p>
  <pre><code>const QuoteScreen = (props) =&gt; {
    
    const QuotesRequestedScreen = () =&gt; {
      return (
        &lt;Stack.Navigator headerMode=&quot;none&quot; initialRouteName=&quot;Quote List&quot;&gt;
          &lt;Stack.Screen name=&quot;Quote List&quot; component={QuotesRequestedListScreen} /&gt;
          &lt;Stack.Screen name=&quot;Card&quot; component={QuoteRequestedCardScreen} /&gt;
        &lt;/Stack.Navigator&gt;
      );
    };
  
    return (
      &lt;Tab.Navigator initialRouteName=&quot;Request Quote&quot;&gt;
        &lt;Tab.Screen name=&quot;Request Quote&quot; component={RequestQuoteScreen} /&gt;
        &lt;Tab.Screen name=&quot;Quotes Requested&quot; component={QuotesRequestedScreen} /&gt;
      &lt;/Tab.Navigator&gt;
    );
  };
  
  export default QuoteScreen;
  </code></pre>
  <p><strong>QuotesRequestedListScreen</strong></p>
  <pre><code>const QuotesRequestedListScreen = (props) =&gt; {
    //Getting userID for the useEffect
    let userId = useSelector((state) =&gt; state.user.userId);
    const {height} = Dimensions.get('window');
  
    //
    ////USESTATES
    //
  
    const [quoteStatusCards, setQuoteStatusCards] = useState([]);
    const [airportList, setAirportList] = useState([]);
    const [rawQuotes, setRawQuotes] = useState([]);
    const [errorDetector, setErrorDetector] = useState(false);
    const [isLoading, setIsLoading] = useState(true);
    const [isUserLogged, setIsUserLogged] = useState(true);
  
    //
    ////USEEFFECTS
    //
  
    useEffect(() =&gt; {
      //Function that starts the verification once it has the focus
      const unsubscribe = props.navigation.addListener('focus', () =&gt; {
  
      if (userId !== null) {
          console.log('Entrei aqui');
          getQuotes();
      } else {
          setIsLoading(false);
          setIsUserLogged(false);
      }
      });
  
      return unsubscribe;
    }, [userId]);
  
    //
    //// FUNCTIONS
    //
  
    const getQuotes = async () =&gt; {
      await firebase.getQuotesById(userId).then(async (results) =&gt; {
        if (results.isError) {
          errorOperationQuote(results.errorMessage);
        } else {
          //Then it tries to get the airportlist from asyncStorage.
          await AsyncStorage.getItem('airportList')
            .then(async (list) =&gt; {
              //Checks if the list is empty
              if (list != null) {
                //If it's not, then it checks the last version in the database with the one stored in the asyncstorage
                await firebase.compareAirportListVersion().then((result) =&gt; {
                  if (result.isError) {
                    //If there are errors, then it reports the error to the user
                    errorOperationQuote(result.errorMessage);
                  } else {
                    if (result.success) {
                      //If it's the same version, then it loads inside airportList;
                      setAirportList(JSON.parse(list));
                      setRawQuotes(results.quotes);
                      setIsLoading(false);
                    } else {
                      //If it's not the same version, then it downloads the whole list again.
                      downloadAirportList(results.quotes);
                    }
                  }
                });
              } else {
                //If the list's empty, then it downloads the airport
                downloadAirportList(results.quotes);
              }
            })
            .catch((error) =&gt; {
              errorOperationQuote(error.errorMessage);
            });
        }
      });
    };
  
    //Downloads the airport list and set it to the AirportList state.
    const downloadAirportList = async (quotes) =&gt; {
      await firebase.getAirports().then((result) =&gt; {
        if (result.success) {
          setAirportList(JSON.parse(result.airportList));
          setRawQuotes(quotes);
        } else {
          errorOperationQuote(result.errorMessage);
        }
      });
    };
  
    //
    ////RETURN
    //
  
    return (
      &lt;Container&gt;
        &lt;Content contentContainerStyle={styles.quoteCardsContainer}&gt;
          {isLoading ? (
            &lt;View style={styles.loadingErrorContainers}&gt;
              &lt;Spinner style={{alignItems: 'center'}} color={colors.colorRed} /&gt;
            &lt;/View&gt;
          ) : !isUserLogged ? (
            &lt;View style={styles.loadingErrorContainers}&gt;
              &lt;Text style={styles.errorMessageText}&gt;
                User is not logged in. Please, log in first before checking the
                quotes requested.
              &lt;/Text&gt;
              &lt;Button
                onPress={() =&gt; {
                  props.navigation.navigate('Login');
                }}&gt;
                Login
              &lt;/Button&gt;
            &lt;/View&gt;
          ) 
  ///...
        &lt;/Content&gt;
      &lt;/Container&gt;
    );
  
  }
  </code></pre>
  <p><strong>QuoteRequestedCardScreen</strong></p>
  <pre><code>const QuoteRequestedCardScreen = (props) =&gt; {
    const [quoteInfo, setQuoteInfo] = useState(props.route.params?.selectedQuote);
    console.log(quoteInfo);
  
    return (
      &lt;Container&gt;
        &lt;Content style={{marginHorizontal: 10}}&gt;
          &lt;Card&gt;
            &lt;CardItem style={{paddingLeft: 0}} header&gt;
              &lt;View style={{flexDirection: 'row'}}&gt;
                &lt;Button
                  onPress={() =&gt; props.navigation.navigate('Quote List')}
                  transparent&gt;
                  &lt;Icon name=&quot;arrow-left&quot; type=&quot;FontAwesome5&quot; /&gt;
                &lt;/Button&gt;
                //...
              &lt;/View&gt;
            &lt;/CardItem&gt;
          &lt;/Card&gt;
        &lt;/Content&gt;
      &lt;/Container&gt;
    );
  };
  
  export default QuoteRequestedCardScreen;
  </code></pre>