Reactのリスト表示でkeyを設定する理由！パフォーマンス改善のコツ

Reactでリストを表示する際、「key」プロパティにどういった値を設定すればよいか迷ったことはないでしょうか。子要素が追加されたり削除されたり並び順が変わるとき、Reactはどの要素を維持し、どれを再作成すべきかを判断する必要があります。この判断に「key」が大きな役割を果たします。この記事ではReactリスト表示のkey設定によって得られるパフォーマンス上のメリット、よくある間違い、具体的な設定方法を、最新情報をもとに詳しく解説します。

React リスト表示 key の基本と重要性

Reactリスト表示でkeyを指定する意味は、配列の子要素をレンダリングする際に、それぞれの要素を一意に識別することで、UIの更新を効率化するところにあります。keyがない、あるいは不適切なkeyがあるとReactは前回レンダリングされた要素とどれが対応しているかを位置（インデックス）ベースでしか判断できず、予期せぬ再レンダリングや状態のリセットなどを引き起こすことがあります。keyは兄弟要素の間で一意である必要があり、staticなリスト以外ではindexを使うのは避けるべきです。最新情報によれば、keyは文字列または数値で指定し、データのIDやUUIDなど、再レンダリング間で変化しない値を使うことが推奨されています。

keyとは何か

keyはリストをmapなどで生成する際に各要素に設定する属性で、React内部でレンダリング前後の仮想DOMツリーの差分を比較する際、どの要素がどれに対応するかを特定する手がかりになります。keyがあれば、追加・削除・並び替えがあったときに最小限のDOM変更で済ませられるため、性能が改善します。

なぜ兄弟要素間で一意である必要があるか

keyは同じ配列（兄弟要素）内で他と重複しない必要があります。重複があるとReactがどの要素を更新すればよいか混乱し、意図しない再描画や副作用が発生することがあります。兄弟要素以外では同じkeyを使っても警告は出ず、問題は起こりにくいです。

keyがないまたは不安定なkeyを使った場合のデメリット

keyがない場合、Reactは警告を出します。さらに、要素の追加削除や順序変更時にDOMノードを再作成することで、再描画が多発し、状態保持が失われたり、アニメーションの途中でリセットされたりすることがあります。特に大量項目を扱うリストでは性能に大きな影響を与える可能性があります。

React リスト表示 key を適切に設定する具体的な方法

keyを適切に設定することで、不具合を防ぎつつパフォーマンスを最大限引き出せます。どのような値をkeyにするか、どのようなケースでindexが使えるか、Fragmentでの扱いや動的なリストに特化した注意点など最新のベストプラクティスを見ていきます。開発現場で直面する悩みに対応できる内容になっています。

ユニークなIDをkeyとする

データベースから取得したIDやUUIDなどがあれば、それをkeyにするのが理想です。これにより、追加・削除・並び替えが発生してもkeyが変わらなければ要素の同一性が保たれ、Reactは状態を維持しながら効率的な更新を行えます。複数レンダリング間でID値が変化しないように設計することが重要です。

indexをkeyに使うべきでない場合

リストの並び替えや項目の追加削除がある動的なリストでは、indexをkeyに使うと問題が起きやすいです。項目の位置が変わるたびにindexが変わり、Reactは同じ位置の要素とみなしてしまうため、入力された状態やフォーカスなどが別の要素に紐づけられるなどのバグが発生します。staticなリストなら例外的に許可されることもありますが、再利用性を考えると推奨されません。

Fragmentや複数要素を返す場合のkeyの設定

コンポーネント内で複数のDOMノードを返す場合、空のタグ（…

パフォーマンスの観点から見る React リスト表示 key の影響

key設定の善し悪しは、レンダリング性能・メモリ使用・UI応答速度などに直結します。多くの項目を持つリストや頻繁に更新されるリストでは、keyが不適切だとレンダリングのコストが跳ね上がります。最新のReactの再調整（reconciliation）アルゴリズムで、keyがあることがどのように効いてくるかを具体的に見ていきます。

再調整アルゴリズムでのkeyの役割

Reactは仮想DOMツリーを比較する際、新旧のリストにkeyを使って要素の対応関係を特定し、変更があった箇所のみをDOMに反映します。keyが適切なら要素が移動したかどうかを判断でき、省略すれば位置ベースで判断し、たとえ内容が変わっていない要素でも再作成されることがあります。

大規模リストや仮想スクロールとの組み合わせ

数百から数千のアイテムを表示するリストでは再レンダリングのコストが大きいため、仮想スクロールなどを応用することがあります。keyの設定が甘いと無駄なマウント／アンマウントが発生し、スクロール操作にラグを感じることがあります。しっかりしたkeyで状態維持と高速描画を両立できます。

状態や入力フィールドとの関係

リスト項目内に入力フィールドや内部状態を持つコンポーネントがある場合、不適切なkey設定でコンポーネントが再生成されると入力内容や状態がリセットされてしまいます。正しいkeyを使えばユーザーが入力中の項目が消えるなどのUXの問題を防げます。

React リスト表示 key に関するよくある間違いとアンチパターン

開発の現場で誤ったkey設定によるトラブルが後を絶ちません。indexの乱用、ランダム値の利用、キーが変わりやすい値など、明確に避けるべきアンチパターンを理解することで、品質の高いコードを書けるようになります。具体例を交えて解説します。

indexをkeyにしてしまうケース

静的リストや項目が絶対に動かないケースを除き、indexをkeyに使うことはアンチパターンです。並び替えやフィルタリングで順序が変わると位置が変動するため、Reactの認識と異なる動きをすることがあります。削除や追加時に意図しない要素が再レンダリングされたり状態が失われたりする原因になります。

Math.randomやDate.nowなどのランダムな値をkeyに使う問題

レンダリングのたびにランダム値を生成してkeyに設定すると、常にkeyが変わってしまい、Reactは毎回全要素を再描画することになります。これは性能に非常に悪影響で、状態やフォーカスがすべてリセットされるような挙動につながります。

不変性が保たれないkeyの使用

データ変更に伴ってkeyが変化するような設計（たとえば、日付や計算結果、配列の位置を基にする値）は避ける必要があります。keyが変わればReactは古い要素を破棄し、新しい要素をマウントするので、状態保持ができなくなったり、レンダリングコストが上がったりします。

React リスト表示 key のコツと活用テクニック

基本を押さえたうえでさらにワンランク上の使い方を身につけたい方向けに、複雑なリスト構造やパフォーマンスチューニングに役立つテクニックを紹介します。高頻度の更新や動的なコンテキストでも安定した動作を実現するための工夫をまとめます。

遅延レンダリング・分割レンダリングとの併用

大きなリストはすべてを一度に描画するのではなく、スクロールや可視範囲を検知して遅延または分割でレンダリングする方法があります。そのようなケースではkeyをしっかり固定しておくことで、部分的なレンダリングでも要素の状態を保てるようになります。これにより初回描画やスクロールパフォーマンスが大幅に改善します。

React.memoやPureComponentによる再描画抑制

子要素がpropsやstateの変化がない限り再描画を抑制するため、React.memoやPureComponentが用いられます。これらを使う際、keyが変更されないことが前提です。keyが不安定だとこれらの最適化が無意味になりますので、keyをIDやUUIDなど固定可能な値にすることが重要です。

keyを変更して状態をリセットするテクニック

特定の条件で子コンポーネントの内部状態をリセットしたい場合、keyを意図的に変えるテクニックがあります。keyを変えることでReactはその要素を破棄して再生成するため、状態がクリアされます。ただし乱用は避け、必要な場面でのみ使うようにします。

コード例で学ぶ React リスト表示 key の実践パターン

抽象論だけでは理解が浅くなるので、具体的なコード例を通じて良いパターン・悪いパターンを比較します。シンプルなTODOアプリやリスト追加・削除・並び替えを伴うケースなどで、keyの挙動を実際に観察できる構造を示します。理解を深めるための実践例です。

良いkey設定の例：IDベースでのリストレンダリング

以下のようなデータ構造があれば、各アイテムに固有IDを付与することでkeyとして使います。例えばtodosという配列があり、各todoにidプロパティがあるなら、mapで