データの集まりから、似たようなコンポーネントを複数表示させたい時に、filter()やmap()といったJavaScriptの配列メソッドが使用できる。
この時に、配列の各アイテムにはkeyを渡す必要がある。
配列の各アイテムにkeyを渡さないと、以下のようなエラーがコンソールに表示される
keyが必要な理由
- 配列のどの要素がどのコンポーネントに対応するのかをReactが判断し、正しく更新するために必要
- 適切に
keyを選ぶことで、Reactは何が起こったか推測し、DOMツリーに正しい更新を反映させることができる- 配列の要素の移動
- 要素の挿入
- 要素の削除
keyの種類
- DBからのデータの場合、DBのキーやIDは必然的に一意になるので、それを利用する
- ローカルで生成された場合、アイテムを作成する際に、インクリメンタルなカウンタはuuidなどのパッケージを使用する
keyのルール
- キーは兄弟間で一意である必要がある
- キーは変更してはいけない
keyとして指定してはいけないもの
- アイテムのインデックス
- アイテムが挿入されたり削除されたりすると、レンダーするアイテムの順序が変わる。そのためインデックスをキーとして利用すると、バグの原因になる
- その場で生成したキー
-
key={Math.random()}のようにその場で生成してはいけない。こうすると、レンダーごとにキーが合致しなくなり、コンポーネントとDOMが毎回再作成されるようになってしまう - 表示が遅くなったり、リストアイテム内の入力値も失われてしまう
-
-
keyはReact自体がヒントとして使用するだけで、コンポーネントのpropsとして受け取らない。コンポーネントがIDを必要とする場合は、別のpropsとして渡す必要がある