diff --git a/src/Components/Surcharge.res b/src/Components/Surcharge.res
index f8821d4bf..1b69d51b6 100644
--- a/src/Components/Surcharge.res
+++ b/src/Components/Surcharge.res
@@ -19,12 +19,15 @@ let make = (
 
   let paymentMethodTypes = paymentMethodType->getPaymentMethodTypes
 
+  let getOneClickWalletsMessage = SurchargeUtils.useOneClickWalletsMessageGetter(~list)
+
   let getSurchargeMessage = () => {
     if isForWallets {
-      SurchargeUtils.getOneClickWalletsMessage(~list)
+      getOneClickWalletsMessage()
     } else {
       switch paymentMethodTypes.surcharge_details {
-      | Some(surchargeDetails) => SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails, ~list)
+      | Some(surchargeDetails) =>
+        SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails, ~list)
       | None =>
         if paymentMethod === "card" {
           let creditPaymentMethodTypes = getPaymentMethodTypes("credit")
@@ -44,9 +47,17 @@ let make = (
             let debitCardSurcharge = debitSurchargeDetails.displayTotalSurchargeAmount
 
             if creditCardSurcharge >= debitCardSurcharge {
-              SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails={creditSurchargeDetails}, ~list)
+              SurchargeUtils.getMessage(
+                ~paymentMethod,
+                ~surchargeDetails={creditSurchargeDetails},
+                ~list,
+              )
             } else {
-              SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails={debitSurchargeDetails}, ~list)
+              SurchargeUtils.getMessage(
+                ~paymentMethod,
+                ~surchargeDetails={debitSurchargeDetails},
+                ~list,
+              )
             }
           | (None, Some(surchargeDetails))
           | (Some(surchargeDetails), None) =>
diff --git a/src/Components/SurchargeUtils.res b/src/Components/SurchargeUtils.res
index cc077d976..8d56baf4b 100644
--- a/src/Components/SurchargeUtils.res
+++ b/src/Components/SurchargeUtils.res
@@ -13,39 +13,41 @@ type walletSurchargeDetails = {
   surchargeDetails: PaymentMethodsRecord.surchargeDetails,
 }
 
-let getSurchargeDetailsForOneClickWallets = (~list) => {
+let useSurchargeDetailsForOneClickWallets = (~list) => {
   let areOneClickWalletsRendered = Recoil.useRecoilValueFromAtom(
     RecoilAtoms.areOneClickWalletsRendered,
   )
 
-  oneClickWallets->Js.Array2.reduce((acc, wallet) => {
-    let isWalletBtnRendered = switch wallet.paymentMethodType {
-    | "apple_pay" => areOneClickWalletsRendered.isApplePay
-    | "paypal" => areOneClickWalletsRendered.isPaypal
-    | "google_pay" => areOneClickWalletsRendered.isGooglePay
-    | _ => false
-    }
-    if isWalletBtnRendered {
-      let paymentMethodType =
-        PaymentMethodsRecord.getPaymentMethodTypeFromList(
-          ~list,
-          ~paymentMethod="wallet",
-          ~paymentMethodType=wallet.paymentMethodType,
-        )->Belt.Option.getWithDefault(PaymentMethodsRecord.defaultPaymentMethodType)
-      switch paymentMethodType.surcharge_details {
-      | Some(surchargDetails) =>
-        acc->Js.Array2.concat([
-          {
-            name: wallet.displayName,
-            surchargeDetails: surchargDetails,
-          },
-        ])
-      | None => acc
+  React.useMemo2(() => {
+    oneClickWallets->Js.Array2.reduce((acc, wallet) => {
+      let isWalletBtnRendered = switch wallet.paymentMethodType {
+      | "apple_pay" => areOneClickWalletsRendered.isApplePay
+      | "paypal" => areOneClickWalletsRendered.isPaypal
+      | "google_pay" => areOneClickWalletsRendered.isGooglePay
+      | _ => false
       }
-    } else {
-      acc
-    }
-  }, [])
+      if isWalletBtnRendered {
+        let paymentMethodType =
+          PaymentMethodsRecord.getPaymentMethodTypeFromList(
+            ~list,
+            ~paymentMethod="wallet",
+            ~paymentMethodType=wallet.paymentMethodType,
+          )->Belt.Option.getWithDefault(PaymentMethodsRecord.defaultPaymentMethodType)
+        switch paymentMethodType.surcharge_details {
+        | Some(surchargDetails) =>
+          acc->Js.Array2.concat([
+            {
+              name: wallet.displayName,
+              surchargeDetails: surchargDetails,
+            },
+          ])
+        | None => acc
+        }
+      } else {
+        acc
+      }
+    }, [])
+  }, (areOneClickWalletsRendered, list))
 }
 
 let getMessage = (
@@ -70,44 +72,48 @@ let getMessage = (
   )
 }
 
-let getOneClickWalletsMessage = (~list) => {
+let useOneClickWalletsMessageGetter = (~list) => {
   let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
 
-  let oneClickWalletsArr = getSurchargeDetailsForOneClickWallets(~list)
+  let oneClickWalletsArr = useSurchargeDetailsForOneClickWallets(~list)
 
-  if oneClickWalletsArr->Js.Array2.length !== 0 {
-    let msg = oneClickWalletsArr->Js.Array2.reducei((acc, wallet, index) => {
-      let amount = wallet.surchargeDetails.displayTotalSurchargeAmount->Js.Float.toString
-      let myMsg =
-        <>
-          <strong> {React.string(`${list.currency} ${amount}`)} </strong>
-          {React.string(`${Utils.nbsp}${localeString.on} ${wallet.name}`)}
-        </>
-      let msgToConcat = if index === 0 {
-        myMsg
-      } else if index === oneClickWalletsArr->Belt.Array.length - 1 {
+  let getOneClickWalletsMessage = () => {
+    if oneClickWalletsArr->Js.Array2.length !== 0 {
+      let msg = oneClickWalletsArr->Js.Array2.reducei((acc, wallet, index) => {
+        let amount = wallet.surchargeDetails.displayTotalSurchargeAmount->Js.Float.toString
+        let myMsg =
+          <>
+            <strong> {React.string(`${list.currency} ${amount}`)} </strong>
+            {React.string(`${Utils.nbsp}${localeString.on} ${wallet.name}`)}
+          </>
+        let msgToConcat = if index === 0 {
+          myMsg
+        } else if index === oneClickWalletsArr->Belt.Array.length - 1 {
+          <>
+            {React.string(`${Utils.nbsp}${localeString.\"and"}${Utils.nbsp}`)}
+            {myMsg}
+          </>
+        } else {
+          <>
+            {React.string(`,${Utils.nbsp}`)}
+            {myMsg}
+          </>
+        }
         <>
-          {React.string(`${Utils.nbsp}${localeString.\"and"}${Utils.nbsp}`)}
-          {myMsg}
+          {acc}
+          {msgToConcat}
         </>
-      } else {
+      }, React.null)
+      let finalElement =
         <>
-          {React.string(`,${Utils.nbsp}`)}
-          {myMsg}
+          {React.string(`${localeString.surchargeMsgAmountForOneClickWallets}:${Utils.nbsp}`)}
+          {msg}
         </>
-      }
-      <>
-        {acc}
-        {msgToConcat}
-      </>
-    }, React.null)
-    let finalElement =
-      <>
-        {React.string(`${localeString.surchargeMsgAmountForOneClickWallets}:${Utils.nbsp}`)}
-        {msg}
-      </>
-    Some(finalElement)
-  } else {
-    None
+      Some(finalElement)
+    } else {
+      None
+    }
   }
+
+  getOneClickWalletsMessage
 }