From 0d98a4fd0c46598509e115021418749882de7a75 Mon Sep 17 00:00:00 2001
From: Palash gupta <palash@signoz.io>
Date: Thu, 10 Feb 2022 22:00:35 +0530
Subject: [PATCH] bug: useDebounce function is fixed

---
 frontend/src/hooks/useDebouncedFunction.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/hooks/useDebouncedFunction.ts b/frontend/src/hooks/useDebouncedFunction.ts
index 4a26fbc46f..e63b8c6021 100644
--- a/frontend/src/hooks/useDebouncedFunction.ts
+++ b/frontend/src/hooks/useDebouncedFunction.ts
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useMemo, useRef } from 'react';
 import debounce from 'lodash-es/debounce';
 
 export interface DebouncedFunc<T extends (...args: any[]) => any> {
@@ -26,9 +26,13 @@ const useDebouncedFn = <T extends (...args: any) => any>(
 	options: DebounceOptions = defaultOptions,
 	dependencies?: ReadonlyArray<any>,
 ): DebouncedFunc<T> => {
-	const debounced = debounce(fn, wait, options);
+	const fnRef = useRef(fn);
+	fnRef.current = fn;
 
-	return useCallback(debounced, dependencies || []);
+	return useMemo(
+		() => debounce(((...args) => fnRef.current(...args)) as T, wait, options),
+		[...(dependencies || [])],
+	);
 };
 
 export default useDebouncedFn;