key に index を割り当てるのはアンチパターンだからやめよう

2021-01-14

どんなケースであっても key に index を割り当てるのはやめましょう、アンチパターンです。

以下は蛇足です。


今日現場のコードレビューにおいて key に index を割り当てたコードが上がってきたので「key に index 割り当てるのはアンチパターンなのでやめましょう」というニュアンスの指摘をしました。

hogeList.map((value, index) => <div key={index}>{value}</div>);

すると他のレビュワーの方より 「アンチパターンは言いすぎです、key に index を使用しても言いケースもありますよ」との反論を Index as a key is an anti-pattern という記事とともに頂けました。

React の公式 からリンクが貼られている記事なので、ほぼ公式の見解だと思って問題ないでしょう。

公式サイトの記述は以下のとおりです。

レンダーされる要素に安定した ID がない場合、最終手段として項目のインデックスを使うことができます

要素の並び順が変更される可能性がある場合、インデックスを key として使用することはお勧めしません。パフォーマンスに悪い影響を与え、コンポーネントの状態に問題を起こす可能性があります。

公式の見解としては「key に index を割り当てるのは最終手段であって、要素の並び順が変更される可能性がないケースのみ可能です」くらいのニュアンスかなーと思います。

さらに Medium の記事には以下のように書かれていますね。

Many people asked if they always, always have to generate ids. Others have suggested use cases when using the index as a key seems justifiable.

It is true that sometimes generating new ids is redundant and may be avoided. For example translation of license terms or list of contributors.

To help you decide, I put together three conditions which these examples have in common:

the list and items are static–they are not computed and do not change; the items in the list have no ids; the list is never reordered or filtered.

When all of them are met, you may safely use the index as a key.

多くの人が、常に ID を生成する必要があるかどうかを尋ねました。 インデックスをキーとして使用することが正当であると思われる場合のユースケースを提案する人もいます。

確かに、新しい ID の生成は冗長であり、回避できる場合があります。 たとえば、ライセンス条項の翻訳や寄稿者のリスト。

あなたが決定するのを助けるために、私はこれらの例に共通する 3 つの条件をまとめました:

リストとアイテムは静的です-それらは計算されず、変更されません。 リスト内のアイテムには ID がありません。 リストが並べ替えられたり、フィルタリングされたりすることはありません。

それらすべてが満たされると、インデックスをキーとして安全に使用できます。

『あくまで key に index を割り当てることは可能だけど、それってユニークキーを生成するのを面倒がってるだけだよね?』というのが個人的な見解です。

const hogeWithKeyList = hogeList.map((value) => ({ value, key: nanoid(), })); hogeWithKeyList.map(({ key, value }) => <div key={key}>{value}</div>);

いちいち「今回のリストアイテムはユニークキーを持ってないけど条件を満たしているから key に index を割り当てても問題ないな」と考えるほうが面倒ですし、この考え方はバグを引き起きやすいと思うのですが、これは人によりけりですかね。

そもそもブログ記事のタイトルが「Index as a key is an anti-pattern」となっているくらいで、わざわざ最終手段を使う必要なんてありません。

あらゆるすべてのケースにおいて面倒がらずに毎回ユニークキーを割り当ててあげればそれで良くて、それ以上でもそれ以下でもないと思うのが個人的な見解です。

© 2018 kk-web