React.jsでパフォーマンスを向上させるためのキーの重要性

2024-04-02

React.jsにおける配列の子要素のユニークキーの理解

なぜユニークキーが必要なのか

Reactは仮想DOMを使用します。これは実際のDOMを抽象化したもので、パフォーマンスの向上に役立ちます。Reactは、仮想DOMと実際のDOMの違いを比較し、必要な更新のみを実際のDOMに適用します。

リストをレンダリングする場合、Reactは各要素を仮想DOM内の個別のノードとして表現します。要素の順序が変更された場合、Reactは各要素を新しい位置に移動する必要があります。しかし、要素にユニークキーがない場合、Reactはどの要素が移動されたのかを特定できず、すべての要素を再レンダリングする必要が生じます。

ユニークキーを設定する方法

各要素に key プロパティを設定することで、ユニークキーを設定できます。このプロパティには、文字列、数値、またはオブジェクトなど、一意の値を設定できます。

const items = [
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
  { id: 3, name: "Item 3" },
];

const list = (
  <ul>
    {items.map((item) => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

上記の例では、id プロパティをキーとして使用しています。これは、各要素が異なるIDを持っているため、ユニークキーとして適しています。

キーは再利用できます。これは、リスト内の要素の順序を変更する場合に役立ちます。

const items = [
  { id: 2, name: "Item 2" },
  { id: 1, name: "Item 1" },
  { id: 3, name: "Item 3" },
];

const list = (
  <ul>
    {items.map((item) => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

上記の例では、id プロパティをキーとして使用していますが、要素の順序が変更されています。しかし、キーは再利用されているため、Reactは各要素を新しい位置に移動することができます。

React.jsでリストをレンダリングする際、各要素にユニークキーを設定する必要があります。これは、Reactが効率的に更新を特定し、パフォーマンスを向上させるために役立ちます。

キーは、文字列、数値、またはオブジェクトなど、一意の値を設定できます。キーは再利用でき、リスト内の要素の順序を変更する場合に役立ちます。

基本的な例

const items = [
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
  { id: 3, name: "Item 3" },
];

const list = (
  <ul>
    {items.map((item) => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

キーの再利用

const items = [
  { id: 2, name: "Item 2" },
  { id: 1, name: "Item 1" },
  { id: 3, name: "Item 3" },
];

const list = (
  <ul>
    {items.map((item) => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

動的なキー

const [items, setItems] = useState([
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
  { id: 3, name: "Item 3" },
]);

const handleAdd = () => {
  setItems([...items, { id: 4, name: "Item 4" }]);
};

const list = (
  <ul>
    {items.map((item) => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

この例では、useState フックを使用して、items 配列の状態を管理しています。handleAdd 関数は、新しい要素を items 配列に追加します。

カスタムキー

const items = [
  { name: "Item 1" },
  { name: "Item 2" },
  { name: "Item 3" },
];

const list = (
  <ul>
    {items.map((item, index) => (
      <li key={`${item.name}-${index}`}>{item.name}</li>
    ))}
  </ul>
);

この例では、name プロパティとインデックスを組み合わせて、カスタムキーを生成しています。これは、name プロパティだけではユニークではない場合に役立ちます。

ユニークキーを設定する他の方法

uuid ライブラリを使用して、ランダムなUUIDを生成できます。UUIDは、重複する可能性が非常に低いユニークな識別子です。

import { v4 as uuidv4 } from 'uuid';

const items = [
  { name: "Item 1" },
  { name: "Item 2" },
  { name: "Item 3" },
];

const list = (
  <ul>
    {items.map((item) => (
      <li key={uuidv4()}>{item.name}</li>
    ))}
  </ul>
);

Date.now() を使用して、現在時刻を取得できます。現在時刻は、ユニークキーとして使用できる一意の値です。

const items = [
  { name: "Item 1" },
  { name: "Item 2" },
  { name: "Item 3" },
];

const list = (
  <ul>
    {items.map((item) => (
      <li key={Date.now()}>{item.name}</li>
    ))}
  </ul>
);

インデックスの使用

要素のインデックスをキーとして使用することもできます。ただし、これは要素の順序を変更できない場合にのみ使用してください。

const items = [
  { name: "Item 1" },
  { name: "Item 2" },
  { name: "Item 3" },
];

const list = (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item.name}</li>
    ))}
  </ul>
);