最適化Todo List性能#01 bulkdataを入力して遅くする

大量のデータをレンダリングすると遅くなるため、パフォーマンスを最適化する必要があります.
bulkdataを入力してレンダリングします.

function createBulkTodos() {
  const array = [];
  for (let i = 1; i <= 2500; i++) {
    array.push({
      id: 1,
      text: `할 일 ${i}`,
      checked: false,
    });
  }
  return array;
}

const AppCopy = () => {
  const [todos, setTodos] = useState(createBulkTodos);
  //고유 값으로 사용될 아이디.
  // ref를 사용하여 변수 담기

  const nextId = useRef(2501);
  const onInsert = useCallback(
    (text) => {
      const todo = {
        id: nextId.current,
        text,
        checked: false,
      };
      setTodos(todos.concat(todo));
      nextId.current += 1; //nextId 1씩 더하기
    },
    [todos],
  );
  const onRemove = useCallback(
    (id) => {
      setTodos(todos.filter((todo) => todo.id !== id));
    },
    [todos],
  );

  const onToggle = useCallback(
    (id) => {
      setTodos(
        todos.map((todo) =>
          todo.id === id ? { ...todo, checked: !todo.checked } : todo,
        ),
      );
    },
    [todos],
  );

  return (
    <TodoTemplate>
      <TodoInsert onInsert={onInsert} />
      <TodoList todos={todos} onRemove={onRemove} onToggle={onToggle} />
    </TodoTemplate>
  );
};

export default AppCopy;

createBulkTodosという関数を作成し、2500個のデータを入力しました.確かに遅くなりました.

ボタンのチェック、ボタンの削除、アイテムの追加はすべて遅くなります.