useCallback from react added to avoid loading loop

Author: oscarlund121

src/features/projects/view/ProjectsContextProvider.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { ProjectsContext } from "@/common";
 import { Project } from "@/features/projects/domain";
 
@@ -15,38 +15,43 @@ const ProjectsContextProvider = ({
   const [refreshing, setRefreshing] = useState(false);
   const isLoadingRef = useRef(false);
 
+
   const setProjectsAndRefreshed = (value: Project[]) => {
     setProjects(value);
   };
 
-  const refreshProjects = () => {
-    if (isLoadingRef.current) return;
-    isLoadingRef.current = true;
-    setRefreshing(true);
-    fetch("/api/refresh-projects", { method: "POST" })
-      .then((res) => res.json())
-      .then(({ projects }) => {
-        if (projects) setProjectsAndRefreshed(projects);
-      })
-      .catch((error) => console.error("Failed to refresh projects", error))
-      .finally(() => {
-        isLoadingRef.current = false;
-        setRefreshing(false);
-      });
-  };
+const refreshProjects = useCallback(() => {
+  if (isLoadingRef.current) return;
+  isLoadingRef.current = true;
+  setRefreshing(true);
+  fetch("/api/refresh-projects", { method: "POST" })
+    .then((res) => res.json())
+    .then(({ projects }) => {
+      if (projects) setProjectsAndRefreshed(projects);
+    })
+    .catch((error) => console.error("Failed to refresh projects", error))
+    .finally(() => {
+      isLoadingRef.current = false;
+      setRefreshing(false);
+    });
+}, []); 
 
   // Trigger background refresh after initial mount
-  useEffect(() => {
-    refreshProjects();
-    const handleVisibilityChange = () => {
-      if (!document.hidden) refreshProjects();
-    };
-    document.addEventListener("visibilitychange", handleVisibilityChange);
-    return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
-  }, []);
+
+useEffect(() => {
+  // Initial refresh
+  refreshProjects();
+  const handleVisibilityChange = () => {
+    if (!document.hidden) refreshProjects();
+  };
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+  return () => {
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
+  };
+}, [refreshProjects]); 
 
   return (
-    <ProjectsContext.Provider value={{ projects, refreshing,refreshProjects }}>
+    <ProjectsContext.Provider value={{ projects, refreshing, refreshProjects }}>
       {children}
     </ProjectsContext.Provider>
   );