React 當初始值是 API 的資料怎麼辦？

要慢慢習慣這個 pattern。

簡述

我原本的想法是用 useState 的 Lazy Initializers 來載入：

useState(async () => {
  const res = await fetch(...);
  const json = await res.json();
  return json
})

不過這樣是行不通的，把「非同步」的東西放在這裡 React 是不會等 response 回來的。

比較常見的慣例是用 useEffect 來發 API，接著再更新 state：

// 把初始值改成空陣列
const [ comments, setComments ] = useState([]);
// 拿到 API 以後再更新 state
useEffect(() => {
  async function fetchComments() {
    try {
      const res = await fetch(API_ENDPOINT);
      const json = await res.json();
      setComments(json);
    } catch (err) {
      setApiError(err);
    }
  }
  fetchComments();
}, []) 

雖然這樣等於說：

1. render
2. useEffect 發 API 拿資料
3. 更新 state，re-render

第一次的 render 顯得有點浪費，不過目前想不到什麼其他的解法，可能這就是寫 React 的 pattern 吧