ReactのリストとKeyをマスターする
Reactでのリストのレンダリングは簡単ですが、正しく行うのは難しいものです。
多くの開発者が配列のインデックスをkeyとして使用していますが、これは間違いです。バグやパフォーマンスの低下を招きます。
Reactで動的なデータを扱うべき正しい方法を以下に示します。
Reactにおけるリストの使用方法
Reactは map() メソッドを使用して、配列をUI要素に変換します。map() を使用すると、Reactは各データをコンポーネントへと変換します。
Keyの役割
ReactはVirtual DOMを使用しています。データが変更されると、Reactは新しいデータと古いデータを比較します。このプロセスはreconciliation（再構築）と呼ばれます。
Keyは一意の識別子として機能します。これにより、Reactはどのアイテムが変更、移動、または削除されたのかを正確に把握できます。
インデックスをKeyとして使用するのが危険な理由
インデックス（0, 1, 2...）をkeyとして使用すると、主に3つの問題が発生します。
- コンポーネントの状態エラー: リストをソートした場合、入力フィールドやチェックボックスが誤ったアイテムのデータを表示してしまうことがあります。
- パフォーマンスの低下: Reactがどのアイテムがどれであるかを追跡できなくなります。その結果、特定のアイテムだけでなく、リスト全体を再レンダリングしてしまうことがよくあります。
- 視覚的なバグ: UIは正しく見えるかもしれませんが、アイテムが移動した際に内部ロジックが失敗します。
Keyの正しい使い方
アプリケーションの速度と安定性を維持するために、以下のルールに従ってください。
- 一意のIDを使用する: 常にデータベースのID（UUIDやプライマリキーなど）を使用してください。
Math.random()は決して使用しない: レンダリング中にkeyを生成すると、更新のたびにReactがすべての要素を再作成してしまいます。これはパフォーマンスを著しく低下させます。- Keyを安定させる: 同じデータに対しては、そのライフサイクル全体を通じて同じKeyを保持する必要があります。
一目でわかる比較
| 特徴 | インデックスの使用 | 一意のIDの使用 |
|---|---|---|
| 安定性 | 不安定 | 非常に高い安定性 |
| パフォーマンス | 低い | 最適 |
| 状態の安全性 | 安全ではない | 100% 安全 |
開発者のためのまとめ
map() メソッドを使用しましょう。key プロップには、一意で安定したIDを渡してください。変更、ソート、またはフィルタリングが行われる可能性のあるリストに対して、配列のインデックスを使用するのは避けましょう。