Reactパフォーマンス向上に必須！「key」プロパティの使い方

2024-05-19

Reactコンポーネントの「key」プロパティにアクセスする方法

propsオブジェクトを使用する

コンポーネントに「key」プロパティを渡すには、親コンポーネントからpropsオブジェクトとして渡します。例えば、以下のコードのようにListItemコンポーネントにidプロパティを渡します。

const ListItem = (props) => {
  return <div key={props.id}>{props.text}</div>;
};

親コンポーネントでListItemコンポーネントを使用する場合は、以下のようになります。

const App = () => {
  const items = [
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' },
  ];

  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item.id} text={item.text} />
      ))}
    </ul>
  );
};

useMemoフックを使用して、コンポーネント内で「key」プロパティを生成することもできます。例えば、以下のコードのようにidプロパティに基づいて「key」プロパティを生成します。

const ListItem = () => {
  const id = useMemo(() => Math.random(), []);
  return <div key={id}>{props.text}</div>;
};

この方法を使用する場合は、useMemoフックの第2引数として空の配列を渡すことで、idプロパティが変更されるたびに「key」プロパティが再生成されないようにする必要があります。

「key」プロパティを使用する利点

仮想DOMの更新を効率化し、パフォーマンスを向上させることができます。
コンポーネントの再レンダリングを減らし、アプリケーションをよりレスポンシブにすることができます。
リスト内のアイテムの順序を維持することができます。

注意事項

すべてのリストアイテムにユニークな「key」プロパティを割り当てる必要があります。
親コンポーネントから渡された「key」プロパティをそのまま使用する必要があります。
コンポーネント内で「key」プロパティを生成する場合は、変更されるたびに再生成されるようにする必要があります。

この例では、ListItemコンポーネントにidプロパティをpropsとして渡し、そのプロパティを「key」プロパティとして使用しています。

const ListItem = (props) => {
  return <div key={props.id}>{props.text}</div>;
};

const App = () => {
  const items = [
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' },
  ];

  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item.id} text={item.text} />
      ))}
    </ul>
  );
};

useMemoフックを使用する

この例では、useMemoフックを使用して、コンポーネント内で「key」プロパティを生成しています。

const ListItem = () => {
  const id = useMemo(() => Math.random(), []);
  return <div key={id}>{props.text}</div>;
};

const App = () => {
  const items = [
    { text: 'Item 1' },
    { text: 'Item 2' },
    { text: 'Item 3' },
  ];

  return (
    <ul>
      {items.map((item) => (
        <ListItem key={useMemo(() => Math.random(), [])} text={item.text} />
      ))}
    </ul>
  );
};

これらの例は、Reactコンポーネントの「key」プロパティにアクセスして使用する2つの方法を示しています。具体的な方法は、アプリケーションの要件によって異なります。

インデックスを使用する

リスト内のアイテムのインデックスを「key」プロパティとして使用する方法です。これは最もシンプルですが、非推奨とされています。なぜなら、アイテムが挿入や削除された場合、「key」プロパティが不一致になり、予期しない動作を引き起こす可能性があるからです。

const ListItem = (props, index) => {
  return <div key={index}>{props.text}</div>;
};

const App = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <ul>
      {items.map((item, index) => (
        <ListItem key={index} text={item} />
      ))}
    </ul>
  );
};

データオブジェクトのプロパティを使用する

リスト内のアイテムにユニークなIDプロパティがある場合は、そのプロパティを「key」プロパティとして使用できます。

const ListItem = (props) => {
  return <div key={props.item.id}>{props.item.text}</div>;
};

const App = () => {
  const items = [
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' },
  ];

  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item.id} item={item} />
      ))}
    </ul>
  );
};

createElementを使用する

稀なケースですが、createElement関数を使用してReact要素を作成する場合、「key」プロパティを直接指定できます。

const ListItem = (props) => {
  return React.createElement('div', { key: props.id }, props.text);
};

const App = () => {
  const items = [
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' },
  ];

  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item.id} id={item.id} text={item.text} />
      ))}
    </ul>
  );
};