TypeScriptでReactを使う場合は型定義を記載しますが、カリー化する場合の型定義の仕方は少々分かりづらいです。 React Hookをカリー化する コンポーネントを生成するにあたってカリー化…
ReactのuseEffectを使ってAPIからデータを取得して直ぐに参照しようとすると、値が取得されておらずにnullになっていることがあります。
その原因と対処方法について記載します。
useEffectの処理結果がnullになる原因
useEffectは以下のタイミングで実行されます。
・componentDidMount: コンポーネントをマウントした後
・componentDidUpdate: コンポーネントを更新した後
・componentWillUnmount: コンポーネントをアンマウントする前
ポイントは、ライフサイクルの中で全てコンポーネントがマウントされた後に実行される点です。
useEffectでセットする変数Aがnullになるとすれば、コンポーネントのマウント完了前に、変数Aを参照するとnullになります。
対応方法
データの取得状態に応じて、マウントするコンポーネントを切り替えましょう。
よくあるケースでは、データ読込前はローディング状態を示すコンポーネントをマウントします。
その後、useEffectが走ってデータが読み込まれることでコンポーネントが更新されてコンテンツを含むコンポーネントが表示されます。
サンプルコード
