perf(opt): implement memo, useCallback and useMemo for performance optimization

src/App.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useMemo, useState } from "react"
 import { TaskItem } from "./components/TaskItem";
 import { useTasks } from "./hooks/useTasks";
 
@@ -7,9 +7,14 @@ function App() {
   const [inputValue, setInputValue] = useState<string>('');
   const { tasks, addTask, deleteTask, toggleTask } = useTasks();
 
+  const completedCount = useMemo(() => {
+    console.log("Counting tasks...");
+    return tasks.filter(t => t.completed).length;
+  }, [tasks]);
+
   return (
     <div className="container">
-      <h1>SmartX Task Manager</h1>
+      <h1>SmartX Task Manager {completedCount}</h1>
 
       <div className="input-group">
         <input