fix(task): replace Date.now with nanoid for unique keys and update task interface

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "nanoid": "^5.1.9",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"
   },

src/App.tsx

@@ -22,7 +22,7 @@ function App() {
           value={inputValue}
           onChange={(e) => setInputValue(e.target.value)}
          />
-         <button onClick={() => addTask(inputValue)}>Add</button>
+         <button onClick={() => { addTask(inputValue); setInputValue(''); }}>Add</button>
       </div>
       <div className="task-list">
         {tasks.length === 0 ? (

src/components/TaskItem.tsx

@@ -3,8 +3,8 @@ import type { Task } from "../types/task";
 
 interface TaskItemProps {
     task: Task;
-    onDelete: (id: number) => void;
-    onToggle: (id: number) => void;
+    onDelete: (id: string) => void;
+    onToggle: (id: string) => void;
 }
 
 export const TaskItem = memo(({ task, onDelete, onToggle }: TaskItemProps) => {

src/hooks/useTasks.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import type { Task } from "../types/task";
+import { nanoid } from "nanoid";
 
 export const useTasks = () => {
     const [tasks, setTasks] = useState<Task[]>(() => {
@@ -15,26 +16,24 @@ export const useTasks = () => {
         if (title.trim() === '') return;
 
         const newTask: Task = {
-            id: Date.now(),
-            title: title,
+            id: nanoid(),
+            title,
             completed: false,
             createdAt: new Date().toISOString()
         };
-
-        setTasks([...tasks, newTask]);
-
+        
         setTasks(prev => [...prev, newTask]);
     };
 
-    const deleteTask = useCallback((id: number) => {
-        setTasks(tasks.filter(task => task.id !== id));
+    const deleteTask = useCallback((id: string) => {
+        setTasks(prev => prev.filter(task => task.id !== id));
     }, []);
 
-    const toggleTask = useCallback((id: number) => {
-        setTasks(tasks.map(task =>
+    const toggleTask = useCallback((id: string) => {
+        setTasks(prev => prev.map(task =>
             task.id === id ? { ...task, completed: !task.completed } : task
         ));
     }, []);
-    
+
     return { tasks, addTask, deleteTask, toggleTask };
 };

src/types/task.ts

@@ -1,5 +1,5 @@
 export interface Task {
-    id: number;
+    id: string;
     title: string;
     completed: boolean;
     createdAt: string;

yarn.lock

@@ -999,6 +999,11 @@ nanoid@^3.3.11:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
   integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
 
+nanoid@^5.1.9:
+  version "5.1.9"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-5.1.9.tgz#aac959acf7d685269fb1be7f70a90d9db0848948"
+  integrity sha512-ZUvP7KeBLe3OZ1ypw6dI/TzYJuvHP77IM4Ry73waSQTLn8/g8rpdjfyVAh7t1/+FjBtG4lCP42MEbDxOsRpBMw==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"