From 7e5cf65ea32e3938ea7d3a8a21c84a22df7f6ea8 Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant.thomso@gmail.com>
Date: Thu, 25 Jan 2024 23:12:19 +0530
Subject: [PATCH] fix: [GH-4434]: dashboard variables performance issues
 (#4437)

---
 .../VariableItem.tsx                          | 36 ++++---------------
 1 file changed, 7 insertions(+), 29 deletions(-)

diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
index e636ced76c..da20efc590 100644
--- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
+++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
@@ -5,9 +5,9 @@ import { WarningOutlined } from '@ant-design/icons';
 import { Input, Popover, Select, Tooltip, Typography } from 'antd';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import useDebounce from 'hooks/useDebounce';
 import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
 import sortValues from 'lib/dashbaordVariables/sortVariableValues';
+import { debounce } from 'lodash-es';
 import map from 'lodash-es/map';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useEffect, useMemo, useState } from 'react';
@@ -55,24 +55,8 @@ function VariableItem({
 		[],
 	);
 
-	const [variableValue, setVaribleValue] = useState(
-		variableData?.selectedValue?.toString() || '',
-	);
-
-	const debouncedVariableValue = useDebounce(variableValue, 500);
-
 	const [errorMessage, setErrorMessage] = useState<null | string>(null);
 
-	useEffect(() => {
-		const { selectedValue } = variableData;
-
-		if (selectedValue) {
-			setVaribleValue(selectedValue?.toString());
-		}
-
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [variableData]);
-
 	const getDependentVariables = (queryValue: string): string[] => {
 		const matches = queryValue.match(variableRegexPattern);
 
@@ -204,6 +188,9 @@ function VariableItem({
 			}
 	};
 
+	// do not debounce the above function as we do not need debounce in select variables
+	const debouncedHandleChange = debounce(handleChange, 500);
+
 	const { selectedValue } = variableData;
 	const selectedValueStringified = useMemo(() => getSelectValue(selectedValue), [
 		selectedValue,
@@ -219,14 +206,6 @@ function VariableItem({
 			: undefined;
 	const enableSelectAll = variableData.multiSelect && variableData.showALLOption;
 
-	useEffect(() => {
-		if (debouncedVariableValue !== variableData?.selectedValue?.toString()) {
-			handleChange(debouncedVariableValue);
-		}
-
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [debouncedVariableValue]);
-
 	useEffect(() => {
 		// Fetch options for CUSTOM Type
 		if (variableData.type === 'CUSTOM') {
@@ -250,9 +229,9 @@ function VariableItem({
 							placeholder="Enter value"
 							disabled={isDashboardLocked}
 							bordered={false}
-							value={variableValue}
+							defaultValue={variableData.selectedValue?.toString()}
 							onChange={(e): void => {
-								setVaribleValue(e.target.value || '');
+								debouncedHandleChange(e.target.value || '');
 							}}
 							style={{
 								width:
@@ -263,7 +242,7 @@ function VariableItem({
 						!errorMessage &&
 						optionsData && (
 							<Select
-								value={selectValue}
+								defaultValue={selectValue}
 								onChange={handleChange}
 								bordered={false}
 								placeholder="Select value"
@@ -271,7 +250,6 @@ function VariableItem({
 								dropdownMatchSelectWidth={false}
 								style={SelectItemStyle}
 								loading={isLoading}
-								showArrow
 								showSearch
 								data-testid="variable-select"
 								disabled={isDashboardLocked}