better performance

src/core/components/ActivityCodeLog.jsx

@@ -1,30 +1,36 @@
 "use client";
+
+import { useEffect, useState, memo } from "react";
 import useRequest from "@/lib/hooks/useRequest";
-import { useEffect } from "react";
 import { ACTIVITY_LOG } from "@/core/utils/routes";
 
-const ActivityCodeLog = ({ activity_code }) => {
+const ActivityCodeLog = memo(({ activity_code }) => {
     const requestServer = useRequest({ notificationShow: false });
+    const [hasLogged, setHasLogged] = useState(false);
 
     useEffect(() => {
-        if (!activity_code) return;
+        if (!activity_code || hasLogged) return;
 
-        const fetchSubItems = async () => {
+        const controller = new AbortController();
+
+        const fetchActivityLog = async () => {
             try {
                 await requestServer(ACTIVITY_LOG, "post", {
-                    data: {
-                        activityCode: activity_code,
-                    },
+                    data: { activityCode: activity_code },
+                    signal: controller.signal,
                 });
-            } catch (error) {
-                console.error(error); // Always helpful to log the error for debugging.
-            }
+                setHasLogged(true);
+            } catch (error) {}
         };
 
-        fetchSubItems();
-    }, [activity_code, requestServer]);
+        fetchActivityLog();
 
-    return null; // Ensure the component still renders something.
-};
+        return () => {
+            controller.abort();
+        };
+    }, [activity_code, hasLogged, requestServer]);
+
+    return null;
+});
 
 export default ActivityCodeLog;