reactでAPI取得後に値が存在するかを確かめたい。

実現したいこと

reactでAPI取得後に値が存在するかを条件分岐で確かめたい。

前提

現在API取得前に条件分岐が処理され、値が存在しないものとして処理されてしまいます。
これをAPI取得後に処理が走るようにしたいです。

該当のソースコード

userpage.tsx import { useUserStore } from 'src/user'; import { Login } from 'src/Login'; export const UserPage = () => { const user = useUserStore((state) => state.user); if (!user?.name) { return <Login />; } return ( <AppBar> <Box> {user?.name} </Box> </AppBar> }

試したこと

useEffectを使用したのですが、途中でユーザー名が取得できなくなる事を考慮し、やめました。