chore: optimize search performance (#586)

Author: kerm1it

src/generate.tsx

@@ -371,7 +371,7 @@ export default function generateSelector<
     React.useImperativeHandle(ref, () => ({
       focus: selectorRef.current.focus,
       blur: selectorRef.current.blur,
-      scrollTo: listRef.current?.scrollTo,
+      scrollTo: listRef.current?.scrollTo as ScrollTo,
     }));
 
     // ============================= Value ==============================
@@ -380,7 +380,9 @@ export default function generateSelector<
     });
 
     /** Unique raw values */
-    const mergedRawValue = useMemo<RawValueType[]>(
+    const [mergedRawValue, mergedValueMap] = useMemo<
+      [RawValueType[], Map<RawValueType, LabelValueType>]
+    >(
       () =>
         toInnerValue(mergedValue, {
           labelInValue: mergedLabelInValue,
@@ -431,7 +433,7 @@ export default function generateSelector<
       [mergedOptions],
     );
 
-    const getValueOption = useCacheOptions(mergedRawValue, mergedFlattenOptions);
+    const getValueOption = useCacheOptions(mergedFlattenOptions);
 
     // Display options for OptionList
     const displayOptions = useMemo<OptionsType>(() => {
@@ -476,7 +478,7 @@ export default function generateSelector<
         const valueOptions = getValueOption([val]);
         const displayValue = getLabeledValue(val, {
           options: valueOptions,
-          prevValue: mergedValue,
+          prevValueMap: mergedValueMap,
           labelInValue: mergedLabelInValue,
           optionLabelProp: mergedOptionLabelProp,
         });
@@ -511,7 +513,7 @@ export default function generateSelector<
         const selectValue = (mergedLabelInValue
           ? getLabeledValue(newValue, {
               options: newValueOption,
-              prevValue: mergedValue,
+              prevValueMap: mergedValueMap,
               labelInValue: mergedLabelInValue,
               optionLabelProp: mergedOptionLabelProp,
             })
@@ -546,7 +548,7 @@ export default function generateSelector<
         labelInValue: mergedLabelInValue,
         options: newRawValuesOptions,
         getLabeledValue,
-        prevValue: mergedValue,
+        prevValueMap: mergedValueMap,
         optionLabelProp: mergedOptionLabelProp,
       });
 

src/hooks/useCacheOptions.ts

@@ -8,7 +8,7 @@ export default function useCacheOptions<
     key?: Key;
     disabled?: boolean;
   }[]
->(values: RawValueType[], options: FlattenOptionsType<OptionsType>) {
+>(options: FlattenOptionsType<OptionsType>) {
   const prevOptionMapRef = React.useRef<Map<RawValueType, FlattenOptionsType<OptionsType>[number]>>(
     null,
   );
@@ -22,7 +22,7 @@ export default function useCacheOptions<
       map.set(value, item);
     });
     return map;
-  }, [values, options]);
+  }, [options]);
 
   prevOptionMapRef.current = optionMap;
 

src/interface/generator.ts

@@ -38,7 +38,7 @@ export type GetLabeledValue<FOT extends FlattenOptionsType> = (
   value: RawValueType,
   config: {
     options: FOT;
-    prevValue: DefaultValueType;
+    prevValueMap: Map<RawValueType, LabelValueType>;
     labelInValue: boolean;
     optionLabelProp: string;
   },

src/utils/commonUtil.ts

@@ -19,20 +19,26 @@ export function toArray<T>(value: T | T[]): T[] {
 export function toInnerValue(
   value: DefaultValueType,
   { labelInValue, combobox }: { labelInValue: boolean; combobox: boolean },
-): RawValueType[] {
+): [RawValueType[], Map<RawValueType, LabelValueType>] {
+  const valueMap = new Map<RawValueType, LabelValueType>();
+
   if (value === undefined || (value === '' && combobox)) {
-    return [];
+    return [[], valueMap];
   }
 
   const values = Array.isArray(value) ? value : [value];
+  let rawValues = values as RawValueType[];
 
   if (labelInValue) {
-    return (values as LabelValueType[]).map(
-      ({ key, value: val }: LabelValueType) => (val !== undefined ? val : key),
-    );
+    rawValues = (values as LabelValueType[]).map((itemValue: LabelValueType) => {
+      const { key, value: val } = itemValue;
+      const finalVal = val !== undefined ? val : key;
+      valueMap.set(finalVal, itemValue);
+      return finalVal;
+    });
   }
 
-  return values as RawValueType[];
+  return [rawValues, valueMap];
 }
 
 /**
@@ -43,15 +49,15 @@ export function toOuterValues<FOT extends FlattenOptionsType>(
   {
     optionLabelProp,
     labelInValue,
-    prevValue,
+    prevValueMap,
     options,
     getLabeledValue,
   }: {
     optionLabelProp: string;
     labelInValue: boolean;
     getLabeledValue: GetLabeledValue<FOT>;
     options: FOT;
-    prevValue: DefaultValueType;
+    prevValueMap: Map<RawValueType, LabelValueType>;
   },
 ): RawValueType[] | LabelValueType[] {
   let values: DefaultValueType = valueList;
@@ -60,7 +66,7 @@ export function toOuterValues<FOT extends FlattenOptionsType>(
     values = values.map(val =>
       getLabeledValue(val, {
         options,
-        prevValue,
+        prevValueMap,
         labelInValue,
         optionLabelProp,
       }),
@@ -77,11 +83,7 @@ export function removeLastEnabledValue<
   const newValues = [...values];
 
   let removeIndex: number;
-  for (
-    removeIndex = measureValues.length - 1;
-    removeIndex >= 0;
-    removeIndex -= 1
-  ) {
+  for (removeIndex = measureValues.length - 1; removeIndex >= 0; removeIndex -= 1) {
     if (!measureValues[removeIndex].disabled) {
       break;
     }
@@ -101,9 +103,7 @@ export function removeLastEnabledValue<
 }
 
 export const isClient =
-  typeof window !== 'undefined' &&
-  window.document &&
-  window.document.documentElement;
+  typeof window !== 'undefined' && window.document && window.document.documentElement;
 
 /** Is client side and not jsdom */
 export const isBrowserClient = process.env.NODE_ENV !== 'test' && isClient;

src/utils/valueUtil.ts

@@ -119,24 +119,14 @@ export function findValueOption(
 
 export const getLabeledValue: GetLabeledValue<FlattenOptionData[]> = (
   value,
-  { options, prevValue, labelInValue, optionLabelProp },
+  { options, prevValueMap, labelInValue, optionLabelProp },
 ) => {
   const item = findValueOption([value], options)[0];
   const result: LabelValueType = {
     value,
   };
 
-  let prevValItem: LabelValueType;
-  const prevValues = toArray<RawValueType | LabelValueType>(prevValue);
-  if (labelInValue) {
-    prevValItem = prevValues.find((prevItem: LabelValueType) => {
-      if (typeof prevItem === 'object' && 'value' in prevItem) {
-        return prevItem.value === value;
-      }
-      // [Legacy] Support `key` as `value`
-      return prevItem.key === value;
-    }) as LabelValueType;
-  }
+  const prevValItem: LabelValueType = labelInValue ? prevValueMap.get(value) : undefined;
 
   if (prevValItem && typeof prevValItem === 'object' && 'label' in prevValItem) {
     result.label = prevValItem.label;