ReactでAPIから取ってきた値をreturnの中で記述するとエラーが出る

この現象をなんと説明するかが分からず、わかりにくいタイトルになっていますが、起こっていたことのコードはこんな感じです。

(before)

const [posts,setPosts] = useState();

axios.get('/api/○○○○○')
    .then((res)=>{
          setPosts(res);
     }).catch(error =>{
          console.log(error);
     });

(中略)
     
//postsなんてないよってエラーが起こる    
return(
    <div>{posts}</div>
)

そして解決方法
(after)

const [posts,setPosts] = useState();

axios.get('/api/○○○○○')
    .then((res)=>{
          setPosts(res);
     }).catch(error =>{
          console.log(error);
     });

(中略)
     
//postsがあったらreturnしてもらうようにする
if(posts){
   return(
     <div>{posts}</div>
   )
}

以上備忘録でした