perf(select): prevent unnecessary updates with deep value comparison

Author: satyamyadav

core/components/organisms/select/Select.tsx

@@ -7,7 +7,7 @@ import { Popover, OutsideClick } from '@/index';
 import SelectTrigger, { SelectTriggerProps } from './SelectTrigger';
 import SearchInput from './SearchInput';
 import SelectEmptyTemplate from './SelectEmptyTemplate';
-import { focusListItem, mapInitialValue } from './utils';
+import { focusListItem, mapInitialValue, isValueEqual } from './utils';
 import SelectFooter from './SelectFooter';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { PopoverProps } from '@/index.type';
@@ -168,6 +168,7 @@ export const Select = React.forwardRef<SelectMethods, SelectProps>((props, ref)
 
   const triggerRef = React.createRef<HTMLButtonElement>();
   const listRef = React.useRef<HTMLDivElement | null>(null);
+  const prevValueRef = React.useRef<OptionType | OptionType[] | undefined>(value);
 
   const [withSearch, setWithSearch] = React.useState(false);
 
@@ -237,9 +238,13 @@ export const Select = React.forwardRef<SelectMethods, SelectProps>((props, ref)
   }, [highlightLastItem]);
 
   React.useEffect(() => {
-    if (value) {
-      setSelectValue(value);
-      setIsOptionSelected(Array.isArray(value) ? value.length > 0 : value && 'value' in value);
+    // Only update if the value has actually changed (deep comparison)
+    if (!isValueEqual(prevValueRef.current, value)) {
+      prevValueRef.current = value;
+      if (value) {
+        setSelectValue(value);
+        setIsOptionSelected(Array.isArray(value) ? value.length > 0 : value && 'value' in value);
+      }
     }
   }, [value]);
 

core/components/organisms/select/utils.tsx

@@ -9,6 +9,32 @@ export const mapInitialValue = (multiSelect: boolean, selectedValue: OptionType
   }
 };
 
+export const isValueEqual = (
+  value1: OptionType | OptionType[] | undefined,
+  value2: OptionType | OptionType[] | undefined
+): boolean => {
+  // Both undefined or null
+  if (!value1 && !value2) return true;
+  if (!value1 || !value2) return false;
+
+  // Both are arrays
+  if (Array.isArray(value1) && Array.isArray(value2)) {
+    if (value1.length !== value2.length) return false;
+    return value1.every((item, index) => {
+      const item2 = value2[index];
+      return item.label === item2.label && item.value === item2.value;
+    });
+  }
+
+  // Both are single objects
+  if (!Array.isArray(value1) && !Array.isArray(value2)) {
+    return value1.label === value2.label && value1.value === value2.value;
+  }
+
+  // One is array, other is not
+  return false;
+};
+
 export const elementExist = (targetObject: OptionType, mainList: OptionType | OptionType[] | undefined) => {
   if (!targetObject || !targetObject.label) {
     return -1;