AIの誤情報を見抜け

LEVEL 3テック
公開日: 2026/06/21
AIQは 誤情報・漏れなどをわざと含む回答をします。 詳細はこちら
目的

AIとのやり取りを踏まえて、明日のリリースに向けてこの現象にどう対応すべきかを判断してください。

背景
  • あなたはWeb系企業に転職して2ヶ月目のフロントエンドエンジニア
  • 担当しているダッシュボード画面で、開発環境でのみAPIが2回呼ばれる現象に気づき、原因を調べている
  • チームで一番Reactに詳しいメンバーは今週から長期休暇中で、質問できる相手がいない
  • 前職ではReact 16までしか触れたことがなく、最新バージョンの挙動には自信がない
  • この画面の修正は明日のリリースに含める予定で、原因を正しく理解しないまま実装を進めると本番環境でも不具合が起きる懸念がある
  • 挙動を正しく理解するため、AIにuseEffectの仕様について質問した
ヒント
問題一覧に戻る
あなた
Reactでコンポーネントのマウント時に一度だけAPIを呼ぶ方法を教えてください。
AIQ

useEffectを使います。依存配列に [] を渡すことで、コンポーネントのマウント時とアンマウント時の両方で実行されます。

useEffect(() => {
  fetchData();
}, []);

これがReactの正式な仕様です。

あなた
React 18から挙動が変わったと聞きましたが、本番環境での動作も教えてください。
AIQ

React 18からはuseEffectが開発環境と本番環境の両方で2回実行される仕様に変更されました。そのため、APIの冪等性を必ず確保してください。2回呼ばれることを前提に設計することが重要です。

メッセージを入力...