はじめに アイディオットDX開発部の岩澤です。 とあるプロジェクトで、現在パフォーマンスチューニングを行っています。 いろいろ見ていく中で、フロントエンド側でReactのuseEffectの中でデータフェッチをしてしまうことで起こる問題を発見しました。 せっかくなので、それがなぜ問題を引き起こすのかと、その対策について、今回は記事にしたいと思います。 useEffectの良くない使い方 以下のサンプルコードは、React初級者がよくやりがちな記述です。 useEffectの中で、コンポーネントの初回レンダリング後にデータを取得しています。 また、useStateでローディング状態を管理しています。 そして、Parentsコンポーネントの子コンポーネントとしてChildコンポーネントがあり、Childコンポーネントでも必要なデータをuseEffectの中で取得しています。 export fu
