Reactのkeyにindexを入れたくない理由

執筆日: 2020-12-19

概要

ReactのJSXにて配列を展開する際、keyを設定します。
どの要素が変更、追加もしくは削除されたのかをReactが識別できるようにするためです。
keyがなければ警告がでます。

このkeyですが、mapにて展開する際のindexを指定すると思わぬ挙動を招くことがあります。

どのようなことが起こるのか

実際にどのようなことが起きうるのでしょうか。
調べてみるとよい例を作ってくれている方がいましたので、紹介します。
https://jsbin.com/wohima/edit?js,output

Todoリストみたいなもので、Add itemボタンを押すとアイテムが増える、という仕様です。

ここで起きていることは、keyにindexを指定すると、前のアイテムのvalue値が上書きされてしまうということです。

なぜ起きるのか

ではなぜこのようなことが起こるのでしょうか。
理由は公式ドキュメントに載っていましたので、拝借します。

https://ja.reactjs.org/docs/lists-and-keys.html React公式より

keyには要素の識別をするための情報を与えなければなりません。

コンポーネントのインスタンスは key に基づいて更新、再利用されます。インデックスが key の場合、要素の移動はインデックスの変更を伴います。結果として、非制御の入力などに対するコンポーネントの状態が混乱し、予期せぬ形で更新されてしまうことがあります。
React公式 https://ja.reactjs.org/docs/reconciliation.html

つまり、keyにindexでは特定要素として判別するために不十分となります。

一方、id(被らない任意な文字列or数値)であれば、識別が可能です。

結論

keyにはなるべく固有識別を与えたほうがよさそうです。
これはあくまで追加や削除などの操作が加わる場合なので、操作が及ばないリストにはindexでも問題ありません。

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店