Reactのレンダリング時に、データを読みこむ前に表示しようとしてエラーになる問題

Reactで、APIなどからデータを読み込んで表示する場合、データがないのにレンダリングをしてしまい、表示がおかしくなるパターンに遭遇しました。その際は、データが読み込まれるまで描画をしないようにする必要があったようで、以下のように対策しました。

{data.id ? (
	<div>読み込んだ後に表示</div>
) : (
	<div>読み込み中</div>
)}

data.idがなければ読込中、data.idがあれば想定しているデータを表示するといった具合です。このように非同期処理の場合は注意が必要のようです。

今回は以上です！