Debounce margin calculation

We wait for at least 500ms before actually calculating the margin.
This avoids unnecessary API requests when the user rapidly edits
the input field.

taker-frontend/src/App.tsx

@@ -11,7 +11,7 @@ import {
     VStack,
 } from "@chakra-ui/react";
 import * as React from "react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Route, Routes } from "react-router-dom";
 import { useEventSource } from "react-sse-hooks";
 import useWebSocket from "react-use-websocket";
@@ -33,6 +33,7 @@ import {
     StateGroupKey,
     WalletInfo,
 } from "./types";
+import useDebouncedEffect from "./useDebouncedEffect";
 import useLatestEvent from "./useLatestEvent";
 import usePostRequest from "./usePostRequest";
 
@@ -81,22 +82,23 @@ export const App = () => {
     );
     let [makeNewOrderRequest, isCreatingNewOrderRequest] = usePostRequest<CfdOrderRequestPayload>("/api/cfd/order");
 
-    useEffect(() => {
-        if (!order) {
-            return;
-        }
-        let quantity = effectiveQuantity ? Number.parseFloat(effectiveQuantity) : 0;
-        let payload: MarginRequestPayload = {
-            leverage: order.leverage,
-            price: order.price,
-            quantity,
-        };
-        calculateMargin(payload);
-    }, // Eslint demands us to include `calculateMargin` in the list of dependencies.
-     // We don't want that as we will end up in an endless loop. It is safe to ignore `calculateMargin` because
-    // nothing in `calculateMargin` depends on outside values, i.e. is guaranteed to be stable.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [margin, effectiveQuantity, order]);
+    useDebouncedEffect(
+        () => {
+            if (!order) {
+                return;
+            }
+            let quantity = effectiveQuantity ? Number.parseFloat(effectiveQuantity) : 0;
+            let payload: MarginRequestPayload = {
+                leverage: order.leverage,
+                price: order.price,
+                quantity,
+            };
+
+            calculateMargin(payload);
+        },
+        [margin, effectiveQuantity, order],
+        500,
+    );
 
     const format = (val: any) => `$` + val;
     const parse = (val: any) => val.replace(/^\$/, "");

taker-frontend/src/useDebouncedEffect.ts

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+
+// Copied from: https://stackoverflow.com/a/61127960/2489334
+export default function useDebouncedEffect(effect: () => void, deps: any[] | undefined, delay: number) {
+    return useEffect(() => {
+        const handler = setTimeout(() => effect(), delay);
+
+        return () => clearTimeout(handler);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [...deps || [], delay]);
+}