apicontext

db.json

@@ -11,12 +11,6 @@
       "title": "helloxxsxsxsxsxsxsxsxsxsxsxsxsxssssssssssssssssssssxssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssadddadsdsdsadasasasadasaadadadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaavrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrryyyyy",
       "isCompleted": false,
       "id": 2
-    },
-    {
-      "sId": 1,
-      "title": "bbb",
-      "isCompleted": true,
-      "id": 6
     }
   ]
 }
\ No newline at end of file

src/App.js

@@ -11,7 +11,7 @@ function App() {
   useEffect(() => {
     getTask();
   }, []);
-  console.log("okpp", task);
+
   return (
     <div className="App">
       <Layout count={task?.filter((e) => !e.isCompleted).length}>

src/appcontext/index.js

@@ -9,7 +9,7 @@ import {
 } from "../lib/api";
 export const TodoContext = createContext();
 export const useAppContext = () => useContext(TodoContext);
-export function TodoProvider({ children, ...props }) {
+export function TodoProvider({ children }) {
   const [task, setTask] = useState([]);
 
   //POST METHOD
@@ -24,7 +24,6 @@ export function TodoProvider({ children, ...props }) {
   //PATCH METHOD
   async function updateremainder(id) {
     try {
-      console.log("llll", id);
       const response = await updateRemainder(id);
 
       setTask(response);
@@ -78,9 +77,5 @@ export function TodoProvider({ children, ...props }) {
     deleteTask,
     updatetitle,
   };
-  return (
-    <TodoContext.Provider value={value} {...props}>
-      {children}
-    </TodoContext.Provider>
-  );
+  return <TodoContext.Provider value={value}>{children}</TodoContext.Provider>;
 }

src/components/base/checkbox/index.js

+import React from "react";
 import "./checkbox.css";
 
-function Checkbox({ isCompleted, onChange, ...props }) {
+const Checkbox = React.memo(({ isCompleted, onChange, ...props }) => {
+  console.log("checkbox");
   const handleChange = () => {
     isCompleted = !isCompleted;
     onChange(isCompleted ? "checked" : "unchecked");
@@ -15,6 +17,6 @@ function Checkbox({ isCompleted, onChange, ...props }) {
       />
     </div>
   );
-}
+});
 
 export default Checkbox;

src/components/top-level/task/index.js

 import { FaTimesCircle } from "react-icons/fa";
 import Checkbox from "../../base/checkbox";
 import "./task.css";
-import { useEffect, useRef, useLayoutEffect, useState } from "react";
+import {
+  useEffect,
+  useRef,
+  useLayoutEffect,
+  useState,
+  useCallback,
+} from "react";
 
 function Task({ id, title, isCompleted, onDelete, onChange, onEdit }) {
-  const [isedit, setIsEdit] = useState(false);
   const [debouncetitle, setDebounceTitle] = useState(title);
+  const [ischeck, setIsCheck] = useState(isCompleted);
   const textarea_ref = useRef(null);
 
   const handleDelete = (e) => {
@@ -17,13 +23,12 @@ function Task({ id, title, isCompleted, onDelete, onChange, onEdit }) {
     }
     return false;
   };
-  const handleChange = () => {
-    isCompleted = !isCompleted;
-    onChange({ id, isCompleted: isCompleted ? true : false });
-  };
+  const handleChange = useCallback(() => {
+    setIsCheck(!ischeck);
+    onChange({ id, isCompleted: ischeck ? true : false });
+  }, [ischeck]);
 
   const handleContent = (e) => {
-    setIsEdit(true);
     setDebounceTitle(e.target.value);
     const textarea = document.querySelector("textarea");
     textarea.addEventListener("keyup", (e) => {
@@ -35,10 +40,10 @@ function Task({ id, title, isCompleted, onDelete, onChange, onEdit }) {
   //debounce
   useEffect(() => {
     const handler = setTimeout(() => {
-      if (isedit) {
+      if (textarea_ref.current.value != title) {
         onEdit({ id, title: debouncetitle });
       }
-    }, 3000);
+    }, 2000);
 
     return () => {
       clearTimeout(handler);
@@ -54,8 +59,8 @@ function Task({ id, title, isCompleted, onDelete, onChange, onEdit }) {
       <div>
         <Checkbox
           onChange={handleChange}
-          checked={isCompleted}
-          disabled={isCompleted}
+          checked={ischeck}
+          // disabled={ischeck}
         />
 
         <textarea