reactjs - Có cách nào để khởi tạo state của React thông qua một promise không?

Có thể khởi tạo trạng thái của component của tôi thông qua giá trị được giải quyết của một promise không? Tôi muốn nhận một giá trị thông qua lời gọi API từ server và sử dụng nó làm giá trị trạng thái ban đầu của tôi. Một thứ gì đó như:

const http = axios.create({
  baseURL: window.location.origin,
  headers: {
    'Content-type': 'application/json',
  },
});

const App = () => {
  const [dataSize, setDataSize] = useState<number>(() => (
    http.get('/api/getDataCount')
      .then(({ data }) => {
        return data.count;
      })
      .catch(() => {
        return 0;
      })
  ));
  // ...
};

Tôi biết đoạn mã trên sẽ không hoạt động, vì những gì được trả về thực ra là một lời hứa (promise), nhưng đó là ý chính của những gì tôi đang cố gắng đạt được. Tuy nhiên, đoạn mã sau đây nên hoạt động:

const App = () => {
  const [dataSize, setDataSize] = useState<number>(0);
  useEffect(() => {
    http.get('/api/getDataCount')
      .then(({ data }) => setDataSize(data.count));
  }, []);

Nhưng liệu có cách nào tốt hơn cách trên không? Làm sao tôi có thể truy cập trực tiếp giá trị trả về của promise và khởi tạo state với nó, mà không cần gán một giá trị tạm thời mà tôi sẽ không bao giờ sử dụng?