.

src/components/MyWallet/Wallet.jsx

@@ -1,13 +1,25 @@
-import React, { Suspense, lazy, useCallback, useEffect, useState } from "react";
+import React, {
+  Suspense,
+  lazy,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { useSelector } from "react-redux";
 import usersService from "../../services/UsersService";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 const WalletBox = lazy(() => import("./WalletBox"));
 
 const WalletRoutes = () => {
-  const apiCall = new usersService();
-
-  const [walletList, setWalletList] = useState({ loading: true, data: [] });
+  const apiCall = useMemo(() => new usersService(), []);
+  const { walletTable } = useSelector((state) => state.tableReload);
+  const [walletList, setWalletList] = useState({
+    loading: true,
+    data: [],
+    reload: false,
+  });
   const [paymentHistory, setPaymentHistory] = useState({
     loading: true,
     data: [],
@@ -44,26 +56,14 @@ const WalletRoutes = () => {
   }, [apiCall]);
 
   useEffect(() => {
-    let isMounted = true;
-
     const fetchData = async () => {
-      try {
-        await Promise.all([getWalletList(), getPaymentHistory()]);
-      } catch (error) {
-        console.error(error);
-      } finally {
-        if (isMounted) {
-          return (isMounted = false);
-        }
-      }
+      await Promise.all([getWalletList(), getPaymentHistory()]);
     };
 
     fetchData();
+  }, [walletTable, walletList.data]);
 
-    return () => {
-      isMounted = false;
-    };
-  }, [getWalletList, getPaymentHistory]);
+  console.log(walletTable);
   return (
     <Layout>
       <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>