React Native：useState setter 不会重新渲染

Question

I'm new to react and javascript. I am trying to show an ActivityIndicator while I log in a user, however, the setIsLoading method isn't actually changing the state and calling a rerender. the handleLogin method is called on a button click, and when I click the button, useEffect isn't printed to the console which means it isn't being called. Also, console.log(isLoading) still shows the value as false which it is initialized to. Strangely I was able to get it to work when I commented out the entire firebase section, and I was wondering if anyone could help me understand why that is? Thank you.

import React, { useState, useEffect } from 'react'
import firebase from '../firebase'
import { ActivityIndicator, StyleSheet, Text, TextInput, View, Button} from 'react-native'
export default function LoginScreen({navigation}) {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [errorMessage, setErrorMessage] = useState(null)
    const [isLoading, setIsLoading] = useState(false)
    const [showLoader, setShowLoader] = useState(false)

    useEffect(() => {
        setShowLoader(isLoading)
        console.log('useEffect')
    },[isLoading])

    const handleLogin = () => { 
        setIsLoading(true)
        console.log(isLoading)

        firebase.auth().signInWithEmailAndPassword(email, password)
        .then(() => { navigation.navigate('Home')})
        .then(setIsLoading(false))
        .catch((error) => {setErrorMessage(error.message)})

        console.log('handleLogin')
    }
    return (
      <View style={styles.container}>
        <Text>Login</Text>
        {errorMessage &&
          <Text style={{ color: 'red' }}>
            {errorMessage}
          </Text>}
        <TextInput
          style={styles.textInput}
          autoCapitalize="none"
          placeholder="Email"
          onChangeText={email => setEmail(email)}
          value={email}
        />
        <TextInput
          secureTextEntry
          style={styles.textInput}
          autoCapitalize="none"
          placeholder="Password"
          onChangeText={password => setPassword(password)}
          value={password}
        />
        <Button title="Login" onPress={handleLogin} />
        <Button
          title="Don't have an account? Sign Up"
          onPress={() => navigation.navigate('SignUp')}
        />
        {
            showLoader && <ActivityIndicator/>
        }   
      </View>
    )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  textInput: {
    height: 40,
    width: '90%',
    borderColor: 'gray',
    borderWidth: 1,
    marginTop: 8
  }
})

Edit: Thank you, I figured out that useEffect isn't called until the method handleLogin is completed, so isLoading is set to true, but then set to false again after the signin procedure, and so when it comes time for useEffect to be called, it sees that the isLoading state hasn't changed and so useEffect isn't called. If anyone has any ideas as to how to get around this flow (so useEffect is called before the signin procedure or something) I would greatly appreciate it. Thanks!

Answer 1

It seems you are navigating out of the screen before setIsLoading can be executed, although I don't know if it can be the problem without the rest of the code.

console.log(isLoading) is false because useState is asyncronous, setIsLoading is a promise not yet solved when the next line of code is reached.

This line of code isLoading? setShowLoader(true): setShowLoader(false) isLoading? setShowLoader(true): setShowLoader(false) would be cleaner as setShowLoader(isLoading)