optimized custom hook usage

src/components/Project/Teams.jsx

@@ -16,7 +16,7 @@ import ConfirmModal from "../common/ConfirmModal";
 
 const Teams = ({ project }) => {
   const dispatch = useDispatch();
-  dispatch(changeMaster("Job Role"));
+
   const { data, loading } = useMaster();
   const [isModalOpen, setIsModelOpen] = useState(false);
   const [error, setError] = useState("");
@@ -43,11 +43,9 @@ const Teams = ({ project }) => {
         .then((response) => {
           setEmployees(response.data);
           setFilteredEmployees( response.data.filter( ( emp ) => emp.isActive ) );
-          console.log(response)
           setEmployeeLoading(false);
         })
         .catch((error) => {
-          console.error(error);
           setError("Failed to fetch data.");
           setEmployeeLoading(false);
         });
@@ -133,6 +131,11 @@ const Teams = ({ project }) => {
     document.body.style.overflow = "auto";
   };
 
+  useEffect(() => {
+  dispatch(changeMaster("Job Role"));
+}, [dispatch]);
+
+
   useEffect(() => {
     fetchEmployees();
   }, []);

src/hooks/useProfile.js

@@ -3,46 +3,40 @@ import AuthRepository from "../repositories/AuthRepository";
 import {cacheProfileData, getCachedProfileData} from "../slices/apiDataManager";
 import {useSelector} from "react-redux";
 
-export const useProfile = () =>
+let hasFetched = false;
-{
+
-  const loggedUser = useSelector((store)=>store.globalVariables.loginUser)
+export const useProfile = () => {
-  
+  const loggedUser = useSelector( ( store ) => store.globalVariables.loginUser );
-    const [profile, setProfile] = useState(null);
+  const [profile, setProfile] = useState(null);
-    const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
-    const [error, setError] = useState("");
+  const [error, setError] = useState("");
-  
+
-   
+  const fetchData = async () => {
-  const fetchData = async () =>
+    try {
-  {
+      setLoading(true);
-    try
-    {
-      setLoading( true )
       let response = await AuthRepository.profile();
-      setProfile( response.data )
+      setProfile(response.data);
-      cacheProfileData( response.data )
+      cacheProfileData(response.data);
-      setLoading( false );
+    } catch (error) {
-        
+      setError("Failed to fetch data.");
-    } catch ( error )
+    } finally {
-    {
+      setLoading(false);
-      setLoading( false )
+    }
-      console.error( error );
+  };
-      setError( "Failed to fetch data." );
+
-    };
+  useEffect(() => {
-  }
+    if (!hasFetched) {
-  
+      hasFetched = true;
-  
+      if (!loggedUser) {
-  useEffect( () => {
+        fetchData();
-   
+      } else {
-    if (!loggedUser )
+        setProfile(loggedUser);
-    {
+      }
-    fetchData() 
-    } else
-    {
-      setProfile(loggedUser)
     }
-    
-     },[])
   
-    return  { profile,loading,error}
+      setProfile(loggedUser);
-    
+  
-  }
+  }, [loggedUser]);
+
+  return { profile, loading, error };
+};

src/hooks/useProjects.js

@@ -2,17 +2,18 @@ import { useEffect, useState } from "react";
 import { cacheData, getCachedData } from "../slices/apiDataManager";
 import ProjectRepository from "../repositories/ProjectRepository";
 import { useProfile } from "./useProfile";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { setProjectId } from "../slices/localVariablesSlice";
 
 export const useProjects = () => {
-  const { profile } = useProfile();
+
+  const loggedUser = useSelector( ( store ) => store.globalVariables.loginUser )
   const [projects, setProjects] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
 
   const fetchData = async () => {
-    const projectIds = profile?.projects || [];
+    const projectIds = loggedUser?.projects || [];
 
     const filterProjects = (projectsList) => {
       return projectsList
@@ -43,12 +44,11 @@ export const useProjects = () => {
       }
     }
   };
-
   useEffect(() => {
-    if (profile) {
+    if (loggedUser) {
       fetchData();
     }
-  }, [profile]);
+  }, [loggedUser]);
 
   return { projects, loading, error, refetch: fetchData };
 };