Sidestep compiler alert about useCallback wrapping debounce, due to it not being recognized as returning an inline function reference

React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead react-hooks/exhaustive-deps

Author: MajorLift

ui/pages/bridge/prepare/prepare-bridge-page.tsx

@@ -409,16 +409,20 @@ const PrepareBridgePage = ({
     ],
   );
 
-  const debouncedUpdateQuoteRequestInController = useCallback(
+  // `useRef` is used here to manually memoize a function reference.
+  // `useCallback` and React Compiler don't understand that `debounce` returns an inline function reference.
+  // The function contains reactive dependencies, but they are `dispatch` and an action,
+  // making it safe not to worry about recreating this function on dependency updates.
+  const debouncedUpdateQuoteRequestInController = useRef(
     debounce((...args: Parameters<typeof updateQuoteRequestParams>) => {
       dispatch(updateQuoteRequestParams(...args));
     }, 300),
-    [dispatch],
   );
 
   useEffect(() => {
     return () => {
-      debouncedUpdateQuoteRequestInController.cancel();
+      // This `ref` is safe from unintended mutations, because it points to a function reference, not any reactive node or element.
+      debouncedUpdateQuoteRequestInController.current.cancel();
     };
   }, []);
 
@@ -443,8 +447,10 @@ const PrepareBridgePage = ({
         Boolean,
       ) as string[],
     };
-    debouncedUpdateQuoteRequestInController(quoteParams, eventProperties);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    debouncedUpdateQuoteRequestInController.current(
+      quoteParams,
+      eventProperties,
+    );
   }, [quoteParams]);
 
   // Use smart slippage defaults
@@ -780,7 +786,7 @@ const PrepareBridgePage = ({
                   if (!quoteParams) {
                     return;
                   }
-                  debouncedUpdateQuoteRequestInController(quoteParams, {
+                  debouncedUpdateQuoteRequestInController.current(quoteParams, {
                     // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
                     // eslint-disable-next-line @typescript-eslint/naming-convention
                     stx_enabled: smartTransactionsEnabled,