Javascript 当涉及异步调用时，如何处理组件的多个呈现

我有一个组件，它根据用户是否登录来呈现不同的内容。我正在使用firebase身份验证（使用挂钩创建上下文）

从“util/auth.js”导入{useAuth}；
功能导航栏（道具）{
const auth=useAuth；
useffect（（）=>require（'./jquery_script.js'），[]
返回(
{！auth.user&&（）}
{auth.user&&（component_y/>）}
);
}
导出默认导航栏；

此组件渲染两次。首先，auth.user未定义，组件_x被刷新，然后异步身份验证调用完成，auth.user被设置，组件_y被呈现。我应该显示一个加载程序组件来处理这个问题吗

这也不知怎么搞砸了我的jQuery DOM初始化。我希望对组件_y进行初始化。但是，由于组件_x首先被初始化，因此在第二次渲染之后，它不会拾取组件_y的DOM元素

import { useAuth } from "util/auth.js";
function Navbar(props) {
  const auth = useAuth;

  useEffect(() => require('./jquery_script.js'), [])

  return (
    <NavbarContainer>
       {!auth.user && (<component_x />)}
       {auth.user && (component_y />)}

    </NavbarContainer>
  );
}

export default Navbar;