よくある落とし穴とパフォーマンスの基本感覚

定番の落とし穴を「先に知っておく」

初心者がハマる落とし穴は、実はほとんどが同じ数パターンです。先に知っておけば、多くは踏まずに済み、踏んでも「あ、あれか」とすぐ直せます。最終レッスンでは、4つの定番ミスと、パフォーマンスの基本感覚を地図として渡します。暗記ではなく「症状 → 原因 → 直し方」を結びつけて覚えるのがコツです。

落とし穴1: リストの key 忘れ

map でリストを描くとき、各要素に key(重複しない目印)をつけ忘れると警告が出ます。key はReactが「どの要素がどれか」を見分けるための名札です。名札がないと、要素を並べ替えたり消したりしたときに、Reactが取り違えて表示がおかしくなります。key には配列の順番(index)ではなく、データが持つ一意なID(id など)を使いましょう。

{tasks.map((task, i) => (
  <li key={i}>{task.text}</li>
))}
// 並べ替え・削除で取り違えが起きやすい

{tasks.map((task) => (
  <li key={task.id}>{task.text}</li>
))}

落とし穴2: state の直接変更

state を tasks.push(...) のように直接いじると、Reactは中身が変わったことに気づかず、画面が更新されません。stateは「新しい値に置き換える」のが原則です。配列なら [...古い, 新しい]、オブジェクトなら { ...古い, 変える所 } と、コピーを作って更新関数に渡します。

tasks.push({ id: 1, text: "買い物" });
setTasks(tasks); // 同じ配列。変化とみなされない

setTasks([...tasks, { id: 1, text: "買い物" }]);

落とし穴3と4: useEffectの依存漏れと無限ループ

useEffectの第2引数([]で囲む依存配列)は「この値が変わったら実行し直す」というリストです。使っている値を書き忘れる(依存漏れ)と、古い値のまま動き続けます。逆に、effectの中でstateを毎回更新しているのに依存配列を空にしなかったり、更新→再実行→更新…が連鎖したりすると、無限ループになって画面が固まります。

useEffect(() => {
  setCount(count + 1); // 更新→再実行→更新…
}, [count]);

useEffect(() => {
  // 最初の1回だけ動かしたい処理
  setCount((prev) => prev + 1);
}, []); // 依存が空なので初回のみ

パフォーマンスの基本感覚: 増やさない、まず計測

Reactはstateが変わると、その部品を描き直します(再レンダリング)。ふつうはこれで十分速く、心配は要りません。パフォーマンスの基本感覚は2つだけ。ひとつは「不要な再レンダリングをむやみに増やさない」(たとえば巨大なリストの全部を毎回作り直さない)。もうひとつは「遅いと感じたら、勘で最適化せず、まず計測する」ことです。

おわりに — きみはReactの土台を説明できる

ここまで本当によく走りきりました。振り返れば、JSXという見た目の書き方から始まり、部品(コンポーネント)、外からの入力(props)、覚えておく値(state)、外の世界とのやりとり(effect)、リストとフォーム、そして複数画面と公開までたどり着きました。もう「なんとなく動く」ではありません。

きみは今、Reactの土台を自分の言葉で説明できます。「画面は部品の組み合わせ」「状態は共通の親に置いて props で配る」「更新は新しい値に置き換える」「Next.jsがルーティングと公開の土台を足す」——これらを読めて、直せて、説明できる。ここが本当のスタート地点です。あとは小さなアプリを1つ作って公開してみるだけ。AIを相棒に、自信を持って前に進んでください。おつかれさまでした。