title: Conditional rendering with React Hooks : loading
body: <p>I am learning how to use React Hooks and have been stuck for many hours on something that's supposed to be very simple.
  I am trying to display a a text if the state variable "loading" is true. If it's false, I want to display something else.
  No matter what I try, "loading" is always false or at least, the UI does not appear to reflect its value.</p>
  
  <p>here is the code:</p>
  
  <pre><code>import React, {useState, useEffect}  from 'react';
  import {View, SafeAreaView, Text} from 'react-native';
  
  
  const testScreen= (props) =&gt; {
  
  
          const [loading, setLoading ] = useState(true);
  
  
  
          useEffect(() =&gt; {
  
              setLoading(false);
          }, []);
  
          if(loading)
          {
            return &lt;Text&gt;Hi&lt;/Text&gt;;
          }
          else
          {
            return&lt;Text.Hey&lt;/Text&gt;
          }
  
  }
  
  export default testScreen;
  </code></pre>
  
  <p>Any help will be more than welcome and I am sorry if this is very basic.</p>
  
  <p>UPDATE: Here is the actual code I am working with. SetLoading is supposed to update the state variable to false but never does or at least, the UI des not render.</p>
  
  <pre><code>import React, {useState, useEffect}  from 'react';
  import {View, SafeAreaView, Text, ActivityIndicator} from 'react-native';
  import CategoryTag from '../Components/CategoryTag';
  import firestore from '@react-native-firebase/firestore';
  
  const CategoryScreen = (props) =&gt; {
  
      const topicCollection = firestore().collection('Topics')
      .where("active","==",true);
  
      //hooks for topics
      const [topics,setTopics] =  useState([]);
      const [loading, setLoading ] = useState(true);
  
  
  
      //get all active topics
      useEffect(() =&gt; {
        return topicCollection.onSnapshot(querySnapshot =&gt; {
          const list = [];
          querySnapshot.forEach(doc =&gt; {
            const { active, name } = doc.data();
            list.push({
              id: doc.id,
              active,
              name,
            });
          });
  
          setTopics(list);
          setLoading(false);
        });
      }, []);
  
  
      const renderTopics = () =&gt;{
  
        return(
          topics.map((item) =&gt;{
  
            return(
              &lt;CategoryTag key = {item.id} 
              color={userTopics.includes(item.name) ?"#51c0cc":"#303239"} 
              name = {item.name}
              isSelected = {userTopics.includes(item.name)}
              handleClick = {addTopicToUserTopicCollection}
  
              /&gt;
  
            )
  
          })
        )
      }
  
  
      if(loading)
      {
        return (
          &lt;SafeAreaView style={{flex:1, backgroundColor:"#455a65"}}&gt;
              &lt;View style={{width:200, padding:20, paddingTop:60}}&gt;
                  &lt;Text style ={{fontSize:25, fontWeight:"bold", 
  color:"#fff"}}&gt;What are you&lt;/Text&gt;
                  &lt;Text style ={{fontSize:22, color:"#fff"}}&gt;interested in? 
  &lt;/Text&gt;
  
              &lt;/View&gt;
              &lt;View style={{flex:1, alignItems:"center", 
  justifyContent:"center", alignSelf:"center"}}&gt;
  
                  &lt;ActivityIndicator /&gt;
              &lt;/View&gt;
          &lt;/SafeAreaView&gt;
  
        )
      }
      else // this never runs
      {
        return (
          &lt;SafeAreaView style={{flex:1, backgroundColor:"#455a65"}}&gt;
              &lt;View&gt;
                  &lt;View style={{width:200, padding:20, paddingTop:60}}&gt;
                  &lt;Text style ={{fontSize:25, fontWeight:"bold", 
  color:"#fff"}}&gt;What are you&lt;/Text&gt;
                  &lt;Text style ={{fontSize:22, color:"#fff"}}&gt;interested in? 
  &lt;/Text&gt;
  
                  &lt;/View&gt;
                  &lt;View style ={{flexDirection:"column", paddingTop:20}}&gt;
                          &lt;View style ={{padding:15, paddingTop:15, 
  marginBottom:15, 
                          flexWrap:"wrap", flexDirection:"row"}}&gt;
  
                            {renderTopics(topics)}
  
                          &lt;/View&gt;
                   &lt;/View&gt;
              &lt;/View&gt;
          &lt;/SafeAreaView&gt;
  
      );
      }
  
  }
  
  export default CategoryScreen;
  </code></pre>