resources bug fix

src/views/OffersInterestPage.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 // import BlogItem from "../components/Blogs";
 import { useSelector } from "react-redux";
 import OffersInterest from "../components/OffersInterest";
@@ -15,7 +15,7 @@ export default function OffersInterestPage() {
 
     let {joinRoom} = SocketValues() // function to join room for socket
 
-    const apiCall = new usersService()
+    const apiCall = useMemo(()=>{new usersService()},[]) 
 
     let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
 
@@ -28,11 +28,11 @@ export default function OffersInterestPage() {
             setOfferInterestList({loading: false, data: [], imgServer:''})
             console.log('Error: ', err)
         })
-    },[offerInterestListReload])
+    },[apiCall, offerInterestListReload])
 
     useEffect(()=>{
         joinRoom(`INTEREST-${userDetails?.uid}`)
-    },[])
+    },[joinRoom, userDetails])
 
     return (
         <>

src/views/ResourcePage.jsx

@@ -1,22 +1,22 @@
-import React, { useState, useEffect } from "react";
+import React, { useCallback, useMemo, useState, useEffect } from "react";
 import Resources from "../components/Resources";
 import usersService from "../services/UsersService";
 import { useLocation } from "react-router-dom";
 export default function ResourcePage() {
-  const {state, pathname} = useLocation() // CHECKS IF THERE IS AN ACTIVE TAB WITH LINK BACK TO RESOURCES
+  const {state} = useLocation() // CHECKS IF THERE IS AN ACTIVE TAB WITH LINK BACK TO RESOURCES
   const [MyResourceData, setMyResourceData] = useState([]);
-  const api = new usersService();
-  const getMyResourceData = async () => {
-    try {
-      const res = await api.getResourceList();
-      setMyResourceData(res.data);
-    } catch (error) {
-      throw new Error("Error getting mode");
-    }
-  };
+  const api = useMemo(()=>{new usersService()},[]);
+  const getMyResourceData = useCallback( async () => {
+      try {
+        const res = await api.getResourceList();
+        setMyResourceData(res.data);
+      } catch (error) {
+        throw new Error("Error getting mode");
+      }
+    },[api]) 
   useEffect(() => {
     getMyResourceData();
-  }, []);
+  }, [getMyResourceData]);
 
   return <Resources MyResourceData={MyResourceData} activeTab={state ? state.tab : ''} />;
 }