fix: balance api call

Author: sanjam-deriv

src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx

@@ -84,8 +84,6 @@ describe('SubscribeRenderer', () => {
     expect(button).toBeVisible();
 
     await userEvent.click(button);
-
-    expect(mockUnsubscribe).toBeCalledTimes(1);
     expect(mockSubscribe).toBeCalledTimes(1);
     expect(mockSubscribe).toBeCalledWith({ ticks: 'R_50', subscribe: 1 });
   });
@@ -96,8 +94,6 @@ describe('SubscribeRenderer', () => {
     expect(button).toBeVisible();
 
     await userEvent.click(button);
-
-    expect(mockUnsubscribe).toBeCalledTimes(1);
   });
 
   it('should throw an error if incorrect json is being parsed', async () => {

src/features/Apiexplorer/SubscribeRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import {
   TSocketSubscribableEndpointNames,
   TSocketRequestProps,
@@ -30,10 +30,16 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
   const [toggle_modal, setToggleModal] = useState(false);
   const [is_not_valid, setIsNotValid] = useState(false);
 
+  const subscribe_ref: any = useRef();
+
   useEffect(() => {
     if (error && error.code === 'AuthorizationRequired') {
       setToggleModal(true);
     }
+
+    return () => {
+      if (subscribe_ref.current) subscribe_ref.current.unsubscribe();
+    };
   }, [error]);
 
   const parseRequestJSON = () => {
@@ -51,13 +57,13 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
   };
 
   const handleClick = useCallback(() => {
-    unsubscribe();
-    subscribe(parseRequestJSON());
+    if (subscribe_ref.current) subscribe_ref.current.unsubscribe();
+    subscribe_ref.current = subscribe(parseRequestJSON());
     setResponseState(true);
-  }, [reqData, subscribe, unsubscribe]);
+  }, [subscribe, unsubscribe]);
 
   const handleClear = () => {
-    unsubscribe();
+    subscribe_ref.current?.unsubscribe?.();
     setResponseState(false);
   };
 
@@ -88,4 +94,4 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
   );
 }
 
-export default SubscribeRenderer;
+export default React.memo(SubscribeRenderer);

src/hooks/useSubscription/index.tsx

@@ -38,7 +38,9 @@ const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) =>
     (data: Parameters<typeof apiManager.augmentedSubscribe<T>>[1]) => {
       setIsLoading(true);
       setSubscribed(true);
-      setSubscriber(apiManager.augmentedSubscribe(name, data).subscribe(onData, onError));
+      const subscriber_ref = apiManager.augmentedSubscribe(name, data).subscribe(onData, onError);
+      setSubscriber(subscriber_ref);
+      return subscriber_ref;
     },
     [name, onData, onError],
   );
@@ -48,7 +50,15 @@ const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) =>
     setSubscribed(false);
   }, [subscriber]);
 
-  return { subscribe, unsubscribe, is_loading, is_subscribed, error, data, full_response };
+  return {
+    subscribe,
+    unsubscribe,
+    is_loading,
+    is_subscribed,
+    error,
+    data,
+    full_response,
+  };
 };
 
 export default useSubscription;