title: React : how to prevent the hidden component from appearing during rendering?
body: <p>During rendering of the part below, the component CreateGarden appears for 1 sec even if the condition is true.</p>
  <pre><code>  {userInfo.gardenName ?
      &lt;ShowPlants /&gt;
      :
      &lt;CreateGarden setModal={setModal} /&gt;
    }
  </code></pre>
  <p>Here is the custom hook I use to get userInfo</p>
  <pre><code>export default function useUserInfo() {
      const [userInfo, setUserInfo] = useState([]);
      const [categories, setCategories]= useState([]);
  
      const userRef = doc(allUsers,auth.currentUser.uid);
  
      useEffect(() =&gt; {  
         const unsub = onSnapshot(userRef, (doc)=&gt;{
           setUserInfo(doc.data())
           setCategories(doc.data().categories)
           }) 
  
           return ()=&gt;unsub()
        },[auth.currentUser]);
  
      return {userInfo, categories};
  }
  </code></pre>
  <p>I tried creating loading state in the hook and use it as additional condition to render but it's  still the same , I keep having a glimpse of the hidden component.</p>
  <p>EDIT//SOLUTION:<br />
  Finally, after different versions I used the following solution</p>
  <pre><code>export default function useUserInfo() {
      const [userInfo, setUserInfo] = useState({});
      const [loading, setLoading ] = useState(true);
      const [categories, setCategories]= useState([]);
  
      const userRef = doc(allUsers,auth.currentUser.uid);
  
      useEffect(() =&gt; {  
         const unsub = onSnapshot(userRef, (doc)=&gt;{
           setUserInfo(doc.data())
           setCategories(doc.data().categories)
           }) 
           setLoading(false)
         
           return ()=&gt;unsub()
        },[auth.currentUser]);
    
      return {userInfo, categories, loading};
  }
  </code></pre>
  <p>In the component:</p>
  <pre><code>      {userInfo.gardenName &amp;&amp; &lt;ShowPlants /&gt;}
  
        {!userInfo.gardenName &amp;&amp; !loading &amp;&amp; &lt;CreateGarden setModal={setModal} /&gt;}
  </code></pre>