medium_promise_performance.ts

function MyPage() {
  const [myInfo, setMyInfo] = useState(null);
  const [billHistory, setBillHistory] = useState([]);
  const [friendsList, setFriendsList] = useState([]);
  
  useEffect(() => {
    fetchMyInfo().then(async (mInfo) => {
      setMyInfo(mInfo);

      const bHistory = await fetchBillHistory();
      const fList = await fetchFriendsList();
      setBillHistory(bHistory);
      setFriendsList(fList);
    })
  }, []);
  
  return (
    <div>
      {myInfo && <MyInfo myInfo={myInfo} />}
      {billHistory.length > 0 && <BillHistory billHistory={billHistory} />}
      {friendsList.length > 0 && <FriendsList friendsList={friendsList} />}
    </div>
  );
}