React：如何避免渲染时隐藏组件短暂显示？

在以下条件渲染逻辑中，即使userInfo.gardenName条件成立，CreateGarden组件仍会短暂显示1秒：

{userInfo.gardenName ?
  <ShowPlants />
  :
  <CreateGarden setModal={setModal} />
}

原获取用户信息的自定义Hook #

获取userInfo使用的自定义Hook代码如下：

export default function useUserInfo() {
    const [userInfo, setUserInfo] = useState([]);
    const [categories, setCategories]= useState([]);

    const userRef = doc(allUsers,auth.currentUser.uid);

    useEffect(() => {  
       const unsub = onSnapshot(userRef, (doc)=>{
         setUserInfo(doc.data())
         setCategories(doc.data().categories)
         }) 

         return ()=>unsub()
      },[auth.currentUser]);

    return {userInfo, categories};
}

初次尝试无效 #

曾尝试在Hook中添加loading状态作为额外渲染条件，但问题依旧，仍会看到隐藏组件闪现。

最终解决方案 #

经过多次尝试，采用以下方案解决问题：

修改后的自定义Hook #

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(() => {  
       const unsub = onSnapshot(userRef, (doc)=>{
         setUserInfo(doc.data())
         setCategories(doc.data().categories)
         }) 
         setLoading(false)
       
         return ()=>unsub()
      },[auth.currentUser]);
  
    return {userInfo, categories, loading};
}

组件中更新渲染逻辑 #

{userInfo.gardenName && <ShowPlants />}

{!userInfo.gardenName && !loading && <CreateGarden setModal={setModal} />}

内容的提问来源于stack exchange，提问作者user19487188