検索と再取得 stateの変化でAPIを叩き直す

ここまでのデータ取得は、すべて「開いたとき1回だけ」でした。でも実際のアプリはもっと動きます——検索欄に入力すると結果が変わる、タブを切り替えると中身が変わる。つまり「ユーザーの操作に応じて、取得をやり直す」。今日はチャプター1からずっと [] のままだった、useEffectの第2引数の正体を明かします。

依存配列——「これが変わったら、もう一回」

useEffectの第2引数は依存配列と呼ばれます。正体はシンプルで、「この配列に入れた値が変わるたび、中の仕事をもう一度実行する」という監視リストです。

useEffect(() => {
  // やる仕事
}, [userId]);   // ← userIdが変わるたびに、再実行

これで全パターンの意味が繋がります:

・[]:監視対象なし=変わるものがない=初回の1回だけ(チャプター1からやってきたこと)

・[userId]:初回+userIdが変わるたび

・[userId, page]:複数も監視できる。どれかが変われば再実行

「初回だけ」は特別ルールではなく、依存配列の自然な帰結だった——種明かしはこれだけです。

ユーザーを切り替えて表示する

実物で見ます。「ユーザー1」「ユーザー2」のボタンで、表示するユーザーの詳細を切り替える画面です。