Reactガイドを読んでいくその306

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

サスペンスを使ったデータ取得（実験的機能）

アプローチ 1: Fetch-on-Render（サスペンス不使用）

現状Reactではeffectを使用してデータを取得する。

// In a function component:
useEffect(() => {
  fetchSomething();
}, []);

// Or, in a class component:
componentDidMount() {
  fetchSomething();
}

画面上にコンポーネントがレンダーされた後までデータ取得が始まらないので、このアプローチをfetch-on-renderと呼称している。
ウォーターフォールという問題を引き起こしてしまう。
レンダー時にデータを取得するコードではウォーターフォールはよく発生する。
修正することは可能とはいえ、プロダクトが成長するにつれて多くの人はこの問題を解決しづらくするような手法を使うようになる。

今日はここまで。