【React】なぜkey propを使うのか

はじめに

みなさん、Reactでkeyを使う理由はご存知ですか？
React がコードの変更点を認識するためだとは聞いたことがあるのではないでしょうか？
ですが、いまいちピンとこないですよね。

そこで、Reactでkeyを使う理由について詳しく調べてみました。
ぜひ最後までご覧ください。

key propとは

前提として、差分アルゴリズムでは、レンダリング間で変化しないキーを維持する際は、仮想DOMツリー内の位置が変わってもその要素はDOMに保持されます。

それを踏まえて、key propが必要な理由は以下の2つです。

不要な再レンダリングを防ぐため
再レンダリングさせることでStateをリセットするため

不要な再レンダリングを防ぐため

keyを渡さない場合

keyを渡さない場合、要素リストの更新時にReactはどの要素が変更、追加、または削除されたかを正確に識別できません。その結果、リストに新しい要素が追加されると、既存の要素も再構築されることになり、パフォーマンスの低下をもたらします。

// 変更前
<ul>
  <Question question={q[1]}/>
  <Question question={q[2]}/>
</ul>

// 変更後
<ul>
  // 新しいリストを追加
  <Question question={q[0]}/>

  // 以下は変更前と同じだが、Fiber Tree内の異なる場所に表示されるようになった。
  // 差分アルゴリズムのルールに従って、以下の2つの要素はDOMから削除され、新しい位置に再構築される。
  // パフォーマンス悪い！
  <Question question={q[1]}/>
  <Question question={q[2]}/>
</ul>

keyを渡した場合

keyを渡すことで、Reactは各要素を一意に識別し、リスト内で要素が移動した場合でも変更されていない要素はそのまま再利用することができます。その結果、不要な再レンダリングを防ぎ、パフォーマンスを向上させることができます。

// 変更前
<ul>
  <Question key='q1' question={q[1]}/>
  <Question key='q2' question={q[2]}/>
</ul>

// 変更後
<ul>
  // 新しいリストを追加
  <Question key='q0' question={q[0]}/>

  // 以下の2つの要素はツリーの異なる位置にあるが、安定したキーを持つことになる。
  // つまり、レンダリングを跨いでも再構築されない。
  // パフォーマンス良い！
  <Question key='q1' question={q[1]}/>
  <Question key='q2' question={q[2]}/>
</ul>