title: React-Native component updates when I save changes, and not upon starting. [Firebase, useEffect]
body: <p>I'm still a rookie programmer so hopefully my code is understandable.</p>
  <p>I have a Firestore DB, I have no problems getting access to the data stored, the problem is with React components or Expo.</p>
  <p>This problem occurs in various parts of my software, I'm just going to include one (If you guys help me to solve it, I think I would be able to solve the others)</p>
  <p>This is my auth flow:</p>
  <p>LoginForm.js (Creates User with Email and Pass on Firebase) -&gt; AddExtraInfo (Save some profile data) -&gt; ProfileInfoWorker (Save some extra data) -&gt; Account (If the user is logged goes to UserGuest otherwhise to UserLogged) -&gt; UserLogged (Gets the info) -&gt; InfoUser(The component which shows the info)</p>
  <pre><code>  //  UserLogged.js
    export default function UserLogged(props) {
    const [userInfo, setUserInfo] = useState(null);
    const [perfilData, setPerfilData] = useState(&quot;&quot;);
  
    firebase.auth().onAuthStateChanged((user) =&gt; {
      setUserInfo(user);
    });
  
    useEffect(() =&gt; {
      if (userInfo) {
        setLoading(true);
        let ref = db.collection(&quot;perfil-final&quot;);
        let query = ref
          .where(&quot;userId&quot;, &quot;==&quot;, firebase.auth().currentUser.uid)
          .get()
          .then((snapshot) =&gt; {
            if (snapshot.empty) {
              console.log(&quot;No matching documents.&quot;);
              return;
            }
            snapshot.forEach((doc) =&gt; {
              setPerfilData(doc.data());
            });
            setLoading(false);
          })
          .catch((err) =&gt; {
            console.log(&quot;Error getting documents&quot;, err);
          });
      }
    }, []); 
     return (
      &lt;View style={styles.viewUserInfo}&gt;
        {userInfo &amp;&amp; (
          &lt;InfoUser
            userInfo={userInfo}
            perfilData={perfilData}
          /&gt;
        )}
      &lt;/View&gt;
  
  </code></pre>
  <p>And here I print the info</p>
  <pre><code>//InfoUser.js
  export default function InfoUser(props) {
    const {
      userInfo: { uid, displayName, email },
      perfilData,
    }
     return (
      &lt;View&gt;
        &lt;View&gt;
          &lt;Text&gt;
            {displayName ? displayName : &quot;Anonymous&quot;}
          &lt;/Text&gt;
          &lt;Text&gt;{email ? email : &quot;Anonymous&quot;}&lt;/Text&gt;
        &lt;/View&gt;
  
      &lt;/View&gt;
    );
  }
  </code></pre>
  <p>The thing is, when I get to the UserLogged screen, It loads &quot;Anonymous&quot;, but if I press CTRL + S on my code editor, and get the refreshing alert, I get the correct data. What is happening?
  I assume my code is getting null at first so it's not showing the data, but when It changes, why it doesn't update?</p>
  <p>Thanks in advance, cheers!</p>
  <p>EDIT:</p>
  <pre><code>// RegisterForm.js
  export default function RegisterForm(props) {
    const [formData, setFormData] = useState(defaultFormValue());
  
    const onChange = (e, type) =&gt; {
      setFormData({ ...formData, [type]: e.nativeEvent.text });
      const [loading, setLoading] = useState(false);
      const navigation = useNavigation();
      //.. here I validate empty fields and then..
      setLoading(true);
      firebase
        .auth()
        .createUserWithEmailAndPassword(formData.email, formData.password)
        .then(() =&gt; {
          setLoading(false);
          navigation.navigate(&quot;extrainfo&quot;);
        })
        .catch(() =&gt; {
          setLoading(false);
          console.log(&quot;Email already on use&quot;);
        });
    };
    return (
      &lt;View style={styles.formContainer}&gt;
        &lt;Input
          placeholder=&quot;Email&quot;
          containerStyle={styles.inputForm}
          onChange={(e) =&gt; onChange(e, &quot;email&quot;)}
        /&gt;
        &lt;Input
          placeholder=&quot;Password&quot;
          containerStyle={styles.inputForm}
          onChange={(e) =&gt; onChange(e, &quot;password&quot;)}
          password={true}
          secureTextEntry={showPassword ? false : true}
        /&gt;
        &lt;Input
          placeholder=&quot;Repeat Password&quot;
          containerStyle={styles.inputForm}
          onChange={(e) =&gt; onChange(e, &quot;repeatPassword&quot;)}
          password={true}
          secureTextEntry={showRepeatPassword ? false : true}
        /&gt;
        &lt;Button
          title=&quot;Join&quot;
          containerStyle={styles.btnRegisterForm}
          buttonStyle={styles.btnRegister}
          onPress={onSubmit}
        /&gt;
        &lt;Loading isVisible={loading} text=&quot;Making account...&quot; /&gt;
      &lt;/View&gt;
    );
  }
  function defaultFormValue() {
    return {
      email: &quot;&quot;,
      password: &quot;&quot;,
      repeatPassword: &quot;&quot;,
    };
  }
  
  </code></pre>
  <p>Here I redirect when the user press on the account tab, if the user is logged goes to UserLogged, if not goes to the UserLogged screen.</p>
  <pre><code>//Account.js
  export default function Account() {
    const [login, setLogin] = useState(null);
    firebase.auth().onAuthStateChanged((user) =&gt; {
      !user ? setLogin(false) : setLogin(true);
    });
  
    if (login === null) return &lt;Loading isVisible={true} text=&quot;Cargando...&quot; /&gt;;
  
    return login ? &lt;UserLogged /&gt; : &lt;UserGuest /&gt;;
  }
  
  </code></pre>
  <p>And here I'm using React Navigation, trying to get the userType first, in order to show some tabs if the user is a worker, and other tab if the user is a client.</p>
  <pre><code>//Navigation.js
  export default function Navigation(props) {
    const [userType, setUserType] = useState(&quot;&quot;);
    const [userInfo, setUserInfo] = useState(&quot;&quot;)
    const [nombreRuta, setNombreRuta] = useState(&quot;Solicitudes&quot;);
    const [login, setLogin] = useState(null);
  
    firebase.auth().onAuthStateChanged((user) =&gt; {
      !user ? setLogin(false) : setLogin(true);
      if (!user) {
      userType(&quot;&quot;);
      }else{
      setUserInfo(user);
      }
    });
  
    useEffect(() =&gt; {
      let isSubscribed = true;
      if (login) {
        let perfilRef = db.collection(&quot;perfiles&quot;);
        perfilRef
          .where(&quot;userId&quot;, &quot;==&quot;, firebase.auth().currentUser.uid)
          .get()
          .then((snapshot) =&gt; {
            if (snapshot.empty) {
              console.log(&quot;No matching documents.&quot;);
              return;
            }
            snapshot.forEach((doc) =&gt; {
              if (isSubscribed) {
                setTipoUsuario(doc.data().userType);
              }
            });
          })
          .catch((err) =&gt; {
            console.log(&quot;Error getting documents&quot;, err);
          });
      }
      return () =&gt; (isSubscribed = false);
    }, [userInfo]); //Tried with: login and userType
  
    return (
      &lt;NavigationContainer&gt;
        &lt;Tab.Navigator
          initialRouteName=&quot;requests&quot;
          tabBarOptions={{
            inactiveTintColor: &quot;#646464&quot;,
            activeTintColor: &quot;#F7931C&quot;,
          }}
          screenOptions={({ route }) =&gt; ({ 
            tabBarIcon: ({ color }) =&gt; screenOptions(route, color),
          })}
        &gt;
          {userType == &quot;worker&quot; &amp;&amp; (
            &lt;Tab.Screen
              name=&quot;solicitudesworker&quot;
              component={RequestsWorkerStack}
              options={{ title: &quot;Requests&quot; }}
            &gt;&lt;/Tab.Screen&gt;
          )}
          {userType == &quot;client&quot; &amp;&amp; (
            &lt;Tab.Screen
              name=&quot;restaurants&quot;
              component={RequestsStack}
              options={{ title: &quot;Requests&quot; }}
            &gt;&lt;/Tab.Screen&gt;
          )}
  
          &lt;Tab.Screen
            name=&quot;topworkers&quot;
            component={topworkers}
            options={{ title: &quot;Top Workers&quot; }}
          &gt;&lt;/Tab.Screen&gt;
          &lt;Tab.Screen
            name=&quot;search&quot;
            component={SearchStack}
            options={{ title: &quot;Search&quot; }}
          &gt;&lt;/Tab.Screen&gt;
  
          &lt;Tab.Screen
            name=&quot;account&quot;
            component={AccountStack}
            options={{ title: &quot;Account&quot; }}
          &gt;&lt;/Tab.Screen&gt;
        &lt;/Tab.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  
  
  </code></pre>