step5-3 最適化まで終了

src/components/TodoList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import TodoItem from './TodoItem';
 
 type Todo = {
@@ -22,7 +22,7 @@ type TodoListProps = {
   onEditTextChange: (text: string) => void;
 };
 
-export default function TodoList({
+const TodoList = React.memo(function TodoList({
   todos,
   filter,
   editingId,
@@ -34,7 +34,8 @@ export default function TodoList({
   onDeleteClick,
   onEditTextChange,
 }: TodoListProps) {
-  const getFilteredTodos = () => {
+  // フィルタリング処理をメモ化
+  const filteredTodos = useMemo(() => {
     switch (filter) {
       case 'active':
         return todos.filter(todo => !todo.completed);
@@ -43,18 +44,18 @@ export default function TodoList({
       default:
         return todos;
     }
-  };
+  }, [todos, filter]);
 
   return (
     <div className="space-y-2">
-      {getFilteredTodos().length === 0 ? (
+      {filteredTodos.length === 0 ? (
         <p className="text-gray-500 text-center py-8">
           {filter === 'active' && 'すべて完了しました！'}
           {filter === 'completed' && '完了したTODOがありません'}
           {filter === 'all' && 'TODOがありません'}
         </p>
       ) : (
-        getFilteredTodos().map((todo) => (
+        filteredTodos.map((todo) => (
           <TodoItem
             key={todo.id}
             todo={todo}
@@ -71,4 +72,6 @@ export default function TodoList({
       )}
     </div>
   );
-}
+});
+
+export default TodoList;