Why does JSX code stored in a variable never render?

Question

This code should ideally check if a user is signed in to an app and if so, navigate to the home screen and if not the screen should display a component that contains a sign in button and a register button.

import React, { useEffect, useState } from "react";
import { View, ActivityIndicator } from "react-native";
import WelcomeButtons from "../components/welcomeButtons";
import Firebase from "../fireConfig";

const LoadingScreen = (props) => {
  let content = <ActivityIndicator />;
  useEffect(() => {
    Firebase.auth().onAuthStateChanged(function (user) {
      if (user) {
        console.log("User Signed in");
        props.navigation.navigate("Home");
      } else {
        content = (
          <WelcomeButtons
            onSignUpPress={() => props.navigation.navigate("Register")}
            onSignInPress={() => props.navigation.navigate("Login")}
          />
        );
        console.log("User not signed in");
      }
    });
  });
  return <View>{content}</View>;
};

export default LoadingScreen;

When the user is not signed in, the Activity Indicator loads but the welcomeButtons component never renders. Also, when the user isn't signed in, "User not signed in" is logged twice to the console.

Answer 1

You are setting the component to your variable asynchronously, so when your components return the JSX expression, the content still contains the <ActivityIndicator /> element. To achieve this behaviour, you should create a state variable and return the JSX based on it's value, like this

import React, { useEffect, useState } from "react";
import { View, ActivityIndicator } from "react-native";
import WelcomeButtons from "../components/welcomeButtons";
import Firebase from "../fireConfig";

const LoadingScreen = (props) => {
  let content = <ActivityIndicator />;
  const [signedIn, setSignedIn] = useState(false); //false is the default value

  useEffect(() => {
    Firebase.auth().onAuthStateChanged(function (user) {
      if (user) {
        console.log("User Signed in");
        props.navigation.navigate("Home");
        setSignedIn(false);
      } else {
        setSignedIn(true);
        console.log("User not signed in");
      }
    });
  });

  if (signedIn) {
    content = (
      <WelcomeButtons
        onSignUpPress={() => props.navigation.navigate("Register")}
        onSignInPress={() => props.navigation.navigate("Login")}
      />
    );
  }
  return <View>{content}</View>;
};

export default LoadingScreen;

To learn more about states you can check the React official documentation here:

https://reactjs.org/docs/state-and-lifecycle.html