問題一覧に戻る
上級パフォーマンス最適化
問題84: キーの最適化

Reactの調整パフォーマンスにおける安定したキーの重要性を学びます。配列インデックスをキーとして使用すると、ステートフルコンポーネントやアニメーションで問題が発生します。安定した一意のIDは、レンダリング間で適切なコンポーネントIDを保証します。悪いキーは不要なDOM操作とリスト並べ替え時のコンポーネント状態の喪失につながります。

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([
    { text: 'Learn React' },
    { text: 'Build app' }
  ]);

  const addTodo = (text) => {
    {/* IDなしの悪い実践 */}
    setTodos([...todos, { text }]);
  };

  const removeTodo = (index) => {
    setTodos(todos.filter((_, i) => i !== index));
  };

  return (
    <div>
      {todos.map((todo, index) => (
        {/* 不安定なインデックスキー */}
        <div key={}>
          <input defaultValue={todo.text} />
          <button onClick={() => removeTodo(index)}>X</button>
        </div>
      ))}
      <button onClick={() => addTodo('New todo')}>Add</button>
    </div>
  );
}

{/* IDを使った良いアプローチ */}
function BetterTodoList() {
  const [todos, setTodos] = useState([
    { id: .now(), text: 'Learn React' },
    { id: Date.now() + 1, text: 'Build app' }
  ]);

  const addTodo = (text) => {
    setTodos([...todos, { id: Date.(), text }]);
  };

  return (
    <div>
      {todos.map((todo) => (
        {/* 安定した一意のキー */}
        <div key={todo.}>
          <input defaultValue={todo.text} />
        </div>
      ))}
    </div>
  );
}

export default BetterTodoList;