keyの警告が出る理由とその対処法

リストレンダリング時に出る「key」警告の原因と正しい指定方法

⚠️ 警告メッセージ

Warning: Each child in a list should have a unique "key" prop.

これは、Reactで配列を .map() などでレンダリングする際に、key属性を正しく指定していないと発生する警告です。

❓ なぜ key が必要？

• ReactはDOMの差分を高速に検出（＝再描画の最適化）するために、各要素を一意に識別したい。
• keyがない or 重複していると、Reactは同じコンポーネントを別物として扱ってしまう可能性がある。

❌ NG例：keyが指定されていない

const items = ['Apple', 'Banana', 'Orange']

return (

<ul>
    {items.map((item) => (

<li>{item}</li>  // ← keyなし
    ))}
  </ul>
)

✅ OK例：一意のkeyを指定する

return (

<ul>
    {items.map((item) => (
      <li key={item}>{item}</li>
    ))}
  </ul>
)

文字列・IDなど一意性のある値を使うのが原則です。

⚠️ indexをkeyに使うのはアリ？

{items.map((item, index) => (
  <li key={index}>{item}</li>  // indexをkeyにしている
))}

✅ 適しているケース：

• リストが 一度きりで変化しない（追加/削除/並び替えなし）

❌ 適していないケース：

• リストの要素が 頻繁に入れ替わる・変更される場合
  → 意図しない再描画や状態のずれが起きる可能性あり

💡 よくある間違いと対策

🧪 デバッグのヒント

• コンソールの警告ログに "key" と出たら必ずチェック
• 開発ツールで「DOMが勝手に消える・再描画される」などの症状が出たら疑う

✅ まとめ：keyの正しい使い方

🔗 参考

• React公式：Lists and Keys
• Why Not to Use Index as Key (React Docs)