diff --git a/components/TodoList.tsx b/components/TodoList.tsx
index 896200d..0a5a79b 100644
--- a/components/TodoList.tsx
+++ b/components/TodoList.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import TodoItem from './TodoItem'
 
 export interface Todo {
@@ -17,7 +17,7 @@ export default function TodoList() {
   const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
-  const fetchTodos = async () => {
+  const fetchTodos = useCallback(async () => {
     try {
       setIsLoading(true)
       const response = await fetch('/api/todos')
@@ -34,7 +34,7 @@ export default function TodoList() {
     } finally {
       setIsLoading(false)
     }
-  }
+  }, [])
 
   useEffect(() => {
     fetchTodos()