memoised function to prevent multiple api calls

components/stock-operation-modal/index.js

@@ -38,11 +38,20 @@ const StockOperationModal = (props) => {
   }, []);
 
   const getUserWallet = async () => {
+    const [apiResponse, setApiResponse] = useState(undefined);
+    if (apiResponse) {
+      const {
+        currencies: { dinero },
+      } = wallet;
+      setUserMoney(dinero);
+      return;
+    }
     const response = await fetchData(`${BASE_API_URL}/wallet`, 'GET', {
       credentials: 'include',
     });
     const { wallet } = await response.json();
     if (Object.keys(wallet).length === 0) return setUserMoney(0);
+    setApiResponse(wallet);
     const {
       currencies: { dinero },
     } = wallet;

constants.js

@@ -1,16 +1,20 @@
 const BASE_IMAGE_URL =
   'https://raw.githubusercontent.com/Real-Dev-Squad/website-static/main/members';
+
 const BASE_API_URL = process.env.NEXT_PUBLIC_BASE_API_URL;
 const USER_DATA_URL = `${BASE_API_URL}/users/self`;
 const WALLET_URL = `${BASE_API_URL}/wallet`;
+
 const CURRENCIES = {
   NEELAM: 'neelam',
   DINERO: 'dinero',
 };
+
 const PATHS = {
   HOME: 'https://www.realdevsquad.com',
   PROFILE: 'https://my.realdevsquad.com/',
 };
+
 const NAV_MENU = [
   {
     name: 'Home',
@@ -46,6 +50,7 @@ const NAV_MENU = [
 
 const LOGIN_URL =
   'https://github.com/login/oauth/authorize?client_id=23c78f66ab7964e5ef97';
+
 export {
   BASE_IMAGE_URL,
   BASE_API_URL,

utils/fetchSelfDetails.js

@@ -1,11 +1,17 @@
+import React, { useState } from 'react';
 import fetchData from './fetchData';
 
 const BASE_API_URL = process.env.NEXT_PUBLIC_BASE_API_URL;
 
 const fetchSelfDetails = async () => {
+  const [apiResponse, setApiResponse] = useState(undefined);
+  if (apiResponse) {
+    return apiResponse;
+  }
   const userData = await fetchData(`${BASE_API_URL}/users/self`, 'GET', {
     credentials: 'include',
   });
+  setApiResponse(userData);
   return userData;
 };