update: large internal rewrite that accomplishes: 1). large performance boost; 2). reduction in code/bundle size of package. Changes focused on removing logic from useEffects and moving it to memoized functions (that way updates happen quicker and are not occurring after previous renders - and causing additional renders). Additionally, dependency lists were trimmed by making use of refs that keep up to date values between renders. More in depth analysis will be included with release notes for the upcoming v4.0.0 release.

Author: based-ghost

__stories__/index.stories.tsx

@@ -707,7 +707,7 @@ export const Virtualization = () => {
   const [options, setOptions] = useState<Option[]>([]);
   const [optionsCount, setOptionsCount] = useState(100);
 
-  const optionCountList = [100, 1000, 5000, 25000, 50000];
+  const optionCountList = [100, 1000, 10000, 25000, 50000, 100000];
 
   useUpdateEffect(() => {
     selectRef.current?.clearValue();
@@ -752,18 +752,22 @@ export const Virtualization = () => {
             memoization (testing {'&'} debugging becomes much easier as well).
           </Li>
         </List>
-        <em>Note: </em>The only time any noticeable performance degradation will
-        be observed is during search input updates when the <code>options</code>{' '}
-        count reaches the high tens of thousands. To work around this, the{' '}
-        <code>inputDelay</code> (number in milliseconds) can be set to debounce
-        the input value. That way, the <code>menuOptions</code> will not be
-        recalculated on every keystroke.
+        <em>Note: </em>Potential performance degradation could be encountered during input
+        value mutations when the <code>options</code> count reaches the high tens of thousands.
+        To work around this, the <code>inputDelay</code> (in milliseconds) can be set to debounce
+        the input value. That way, the <code>menuOptions</code> will not be recalculated on every
+        keystroke. Although this is an extreme edge case, optimizations have been implemented to
+        handle such with ease. As proof, 50k and 100k option counts have been included in this
+        stress-test demo - but again, data sets this large should not be worked with in memory.
+        Instead, prefer to fetch subsets from a remote data store as needed. For example, using
+        the <code>async</code> functionality or custom logic in a parent component that accomplishes
+        something similar.
       </ListWrapper>
       <SubTitle>Demo</SubTitle>
       <Hr />
       <Card>
         <CardHeader>
-          <Label>Options Count</Label>
+          <Label>Number of Options</Label>
           <Buttons>
             {optionCountList.map((count) => (
               <OptionsCountButton
@@ -985,7 +989,7 @@ export const Async = () => {
             <TextHeader>inputDelay?: number</TextHeader> - As mentioned above, this can be
             set to a positive integer in order to debounce updates to the search input value
             following input change events. This property directly maps to the <code>delay</code> in
-            milliconds passed to the <code>setTimeout</code> method.
+            milliseconds passed to the <code>setTimeout</code> method.
           </Li>
           <Li>
             <TextHeader>isLoading?: boolean</TextHeader> - When true, a loading animation will

babel.config.js

@@ -9,8 +9,6 @@ module.exports = (api) => {
   ];
 
   const plugins = [
-    ['@babel/plugin-proposal-optional-chaining', {loose: true}],
-    ['@babel/plugin-proposal-nullish-coalescing-operator', {loose: true}],
     [
       'babel-plugin-styled-components',
       {

package.json

@@ -49,8 +49,6 @@
   "devDependencies": {
     "@babel/cli": "^7.19.3",
     "@babel/core": "^7.20.2",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
@@ -67,14 +65,14 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.2.2",
+    "@types/jest": "^29.2.3",
     "@types/node": "^18.11.9",
     "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
+    "@types/react-dom": "^18.0.9",
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
     "babel-jest": "^29.3.1",
     "babel-loader": "^9.1.0",
     "babel-plugin-styled-components": "^2.0.7",
@@ -100,7 +98,7 @@
     "rollup": "^3.3.0",
     "rollup-plugin-terser": "^7.0.2",
     "styled-components": "^5.3.6",
-    "typescript": "^4.8.4",
+    "typescript": "^4.9.3",
     "webpack": "^5.75.0"
   },
   "peerDependencies": {

rollup.config.mjs

@@ -50,14 +50,9 @@ const babelPlugin = (useESModules) => {
     babelHelpers: 'runtime',
     exclude: 'node_modules/**',
     extensions: [...DEFAULT_EXTENSIONS, '.ts', '.tsx'],
-    presets: [
-      ['@babel/preset-env', {targets, loose: true}],
-      '@babel/preset-react'
-    ],
+    presets: [['@babel/preset-env', {targets, loose: true}], '@babel/preset-react'],
     plugins: [
       ['@babel/plugin-transform-runtime', {useESModules}],
-      ['@babel/plugin-proposal-optional-chaining', {loose: true}],
-      ['@babel/plugin-proposal-nullish-coalescing-operator', {loose: true}],
       [
         'babel-plugin-styled-components',
         {
@@ -66,10 +61,10 @@ const babelPlugin = (useESModules) => {
           minify: true,
           fileName: false,
           displayName: true,
-          transpileTemplateLiterals: true
+          transpileTemplateLiterals: true,
         },
       ],
-    ]
+    ],
   });
 };
 

src/Select.tsx

@@ -18,7 +18,7 @@ import {
   FilterMatchEnum,
   OptionIndexEnum,
   MenuPositionEnum,
-  FunctionDefaults,
+  FUNCTION_DEFAULTS,
   EMPTY_ARRAY,
   DEFAULT_THEME,
   SELECT_WRAPPER_ATTRS,
@@ -31,11 +31,6 @@ import {
   MENU_MAX_HEIGHT_DEFAULT,
   CONTROL_CONTAINER_TESTID
 } from './constants';
-import type { FixedSizeList } from 'react-window';
-import styled, { css, ThemeProvider, type DefaultTheme } from 'styled-components';
-import { Menu, Value, AriaLiveRegion, AutosizeInput, IndicatorIcons } from './components';
-import { useDebounce, useCallbackRef, useMenuOptions, useMountEffect, useUpdateEffect, useMenuPositioner } from './hooks';
-import { isBoolean, isFunction, isPlainObject, mergeDeep, suppressEvent, normalizeValue, IS_TOUCH_DEVICE, isArrayWithLength } from './utils';
 import type {
   Theme,
   SelectRef,
@@ -52,6 +47,11 @@ import type {
   OptionValueCallback,
   RenderLabelCallback
 } from './types';
+import type { FixedSizeList } from 'react-window';
+import styled, { css, ThemeProvider, type DefaultTheme } from 'styled-components';
+import { Menu, Value, AriaLiveRegion, AutosizeInput, IndicatorIcons } from './components';
+import { useDebounce, useLatestRef, useCallbackRef, useMenuOptions, useMountEffect, useUpdateEffect, useMenuPositioner } from './hooks';
+import { isBoolean, isFunction, isPlainObject, mergeDeep, suppressEvent, normalizeValue, IS_TOUCH_DEVICE, isArrayWithLength } from './utils';
 
 type SelectProps = Readonly<{
   async?: boolean;
@@ -237,13 +237,6 @@ const Select = forwardRef<SelectRef, SelectProps>((
   },
   ref: Ref<SelectRef>
 ) => {
-  // Instance prop refs (primitive/function type)
-  const menuOpenRef = useRef<boolean>(false);
-  const prevMenuOptionsLength = useRef<number>();
-  const onChangeEvtValue = useRef<boolean>(false);
-  const onSearchChangeIsFunc = useRef<boolean>(isFunction(onSearchChange));
-  const onOptionChangeIsFunc = useRef<boolean>(isFunction(onOptionChange));
-
   // DOM element refs
   const listRef = useRef<FixedSizeList | null>(null);
   const menuRef = useRef<HTMLDivElement | null>(null);
@@ -265,13 +258,22 @@ const Select = forwardRef<SelectRef, SelectProps>((
   }, [themeConfig]);
 
   // Memoized callback functions referencing optional function properties on Select.tsx
-  const getOptionLabelFn = useMemo<OptionLabelCallback>(() => getOptionLabel || FunctionDefaults.OPTION_LABEL, [getOptionLabel]);
-  const getOptionValueFn = useMemo<OptionValueCallback>(() => getOptionValue || FunctionDefaults.OPTION_VALUE, [getOptionValue]);
+  const getOptionLabelFn = useMemo<OptionLabelCallback>(() => getOptionLabel || FUNCTION_DEFAULTS.optionLabel, [getOptionLabel]);
+  const getOptionValueFn = useMemo<OptionValueCallback>(() => getOptionValue || FUNCTION_DEFAULTS.optionValue, [getOptionValue]);
   const renderOptionLabelFn = useMemo<RenderLabelCallback>(() => renderOptionLabel || getOptionLabelFn, [renderOptionLabel, getOptionLabelFn]);
 
   // Custom hook abstraction that debounces search input value (opt-in)
   const debouncedInputValue = useDebounce<string>(inputValue, inputDelay);
 
+  // Custom ref objects
+  const onSearchChangeRef = useCallbackRef(onSearchChange);
+  const onOptionChangeRef = useCallbackRef(onOptionChange);
+  const onSearchChangeIsFunc = useLatestRef<boolean>(isFunction(onSearchChange));
+  const onOptionChangeIsFunc = useLatestRef<boolean>(isFunction(onOptionChange));
+  const menuOpenRef = useLatestRef<boolean>(menuOpen);
+  const onChangeEvtValue = useRef<boolean>(false);
+  const prevMenuOptionsLength = useRef<number>();
+
   // If initialValue is specified attempt to initialize, otherwise default to []
   const [selectedOption, setSelectedOption] = useState<SelectedOption[]>(
     () => normalizeValue(
@@ -314,9 +316,6 @@ const Select = forwardRef<SelectRef, SelectProps>((
     scrollMenuIntoView,
   );
 
-  const onSearchChangeRef = useCallbackRef(onSearchChange);
-  const onOptionChangeRef = useCallbackRef(onOptionChange);
-
   const blurInput = (): void => inputRef.current?.blur();
   const focusInput = (): void => inputRef.current?.focus();
   const scrollToItemIndex = (idx: number): void => listRef.current?.scrollToItem(idx);
@@ -386,8 +385,8 @@ const Select = forwardRef<SelectRef, SelectProps>((
         setFocusedOption(FOCUSED_OPTION_DEFAULT);
       },
       setValue: (option?: OptionData) => {
-        const normalizedOptions = normalizeValue(option, getOptionValueFn, getOptionLabelFn);
-        setSelectedOption(normalizedOptions);
+        const normalizedOpts = normalizeValue(option, getOptionValueFn, getOptionLabelFn);
+        setSelectedOption(normalizedOpts);
       },
       toggleMenu: (state?: boolean) => {
         if (state === true || (state === undefined && !menuOpenRef.current)) {
@@ -402,31 +401,15 @@ const Select = forwardRef<SelectRef, SelectProps>((
   );
 
   /**
-   * useMountEffect:
+   * useMountEffect
    * If autoFocus = true, focus the control following initial mount.
    */
   useMountEffect(() => {
     autoFocus && focusInput();
   });
 
   /**
-   * Execute every render - these ref boolean flags are used to determine if functions
-   * ..are defined inside of a callback wrapper returned from 'useCallbackRef' custom hook
-   */
-  useEffect(() => {
-    onSearchChangeIsFunc.current = isFunction(onSearchChange);
-    onOptionChangeIsFunc.current = isFunction(onOptionChange);
-  });
-
-  /**
-   * Write value of 'menuOpen' to ref object.
-   * Prevent extraneous state update calls/rerenders.
-   */
-  useEffect(() => {
-    menuOpenRef.current = menuOpen;
-  }, [menuOpen]);
-
-  /**
+   * useEffect
    * If control recieves focus & openMenuOnFocus = true, open menu
    */
   useEffect(() => {
@@ -436,6 +419,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
   }, [isFocused, openMenuOnFocus, openMenuAndFocusOption]);
 
   /**
+   * useEffect
    * If 'onSearchChange' function is defined, run as callback when the stateful debouncedInputValue
    * updates check if onChangeEvtValue ref is set true, which indicates the inputValue change was triggered by input change event
    */
@@ -447,7 +431,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
   }, [onSearchChangeRef, debouncedInputValue]);
 
   /**
-   * useUpdateEffect:
+   * useUpdateEffect
    * Handle passing 'selectedOption' value(s) to onOptionChange callback function prop (if defined)
    */
   useUpdateEffect(() => {
@@ -463,23 +447,27 @@ const Select = forwardRef<SelectRef, SelectProps>((
   }, [onOptionChangeRef, isMulti, selectedOption]);
 
   /**
-   * useUpdateEffect:
+   * useUpdateEffect
    * Handle clearing focused option if menuOptions array has 0 length;
    * Handle menuOptions changes - conditionally focus first option and do scroll to first option;
    * Handle reseting scroll pos to first item after the previous search returned zero results (use prevMenuOptionsLen)
+   * ...or if there is a selected item and menuOptions is restored to include it, give it focus
    */
   useUpdateEffect(() => {
-    const { length } = menuOptions;
-    const inputChanged = length > 0 && (async || length !== options.length || prevMenuOptionsLength.current === 0);
+    const curLength = menuOptions.length;
+    const { current: prevLength } = prevMenuOptionsLength;
+    const inputChanged = curLength > 0 && (async || curLength !== options.length || prevLength === 0);
+    const menuOpenAndOptionsGrew = menuOpenRef.current && prevLength !== undefined && prevLength < curLength;
 
-    if (length === 0) {
+    if (curLength === 0) {
       setFocusedOption(FOCUSED_OPTION_DEFAULT);
-    } else if (length === 1 || inputChanged) {
-      scrollToItemIndex(0);
-      setFocusedOption({ index: 0, ...menuOptions[0] });
+    } else if (curLength === 1 || inputChanged || menuOpenAndOptionsGrew) {
+      const index = Math.max(0, menuOptions.findIndex((x) => x.isSelected));
+      scrollToItemIndex(index);
+      setFocusedOption({ index, ...menuOptions[index] });
     }
 
-    prevMenuOptionsLength.current = length;
+    prevMenuOptionsLength.current = curLength;
   }, [async, options, menuOptions]);
 
   const selectOptionFromFocused = (): void => {
@@ -543,11 +531,15 @@ const Select = forwardRef<SelectRef, SelectProps>((
 
     switch (key) {
       case 'ArrowDown': {
-        menuOpen ? focusOptionOnArrowKey(OptionIndexEnum.DOWN) : openMenuAndFocusOption(OptionIndexEnum.FIRST);
+        menuOpen
+          ? focusOptionOnArrowKey(OptionIndexEnum.DOWN)
+          : openMenuAndFocusOption(OptionIndexEnum.FIRST);
         break;
       }
       case 'ArrowUp': {
-        menuOpen ? focusOptionOnArrowKey(OptionIndexEnum.UP) : openMenuAndFocusOption(OptionIndexEnum.LAST);
+        menuOpen
+          ? focusOptionOnArrowKey(OptionIndexEnum.UP)
+          : openMenuAndFocusOption(OptionIndexEnum.LAST);
         break;
       }
       case 'ArrowLeft':
@@ -636,7 +628,6 @@ const Select = forwardRef<SelectRef, SelectProps>((
     if (!isFocused) focusInput();
 
     const isNotInput = (e.target as HTMLElement).nodeName !== 'INPUT';
-
     if (!menuOpen) {
       openMenuOnClick && openMenuAndFocusOption(OptionIndexEnum.FIRST);
     } else if (isNotInput) {
@@ -661,9 +652,8 @@ const Select = forwardRef<SelectRef, SelectProps>((
 
   const handleOnInputChange = useCallback((e: FormEvent<HTMLInputElement>): void => {
     onChangeEvtValue.current = true;
-    const curVal = e.currentTarget.value;
-    onInputChange?.(curVal);
-    setInputValue(curVal);
+    onInputChange?.(e.currentTarget.value);
+    setInputValue(e.currentTarget.value);
     setMenuOpen(true);
   }, [onInputChange]);
 

src/components/AutosizeInput/index.tsx

@@ -12,6 +12,10 @@ import React, {
   type FocusEventHandler,
 } from 'react';
 
+type InputProps = Readonly<{
+  isInvalid: boolean
+}>;
+
 type AutosizeInputProps = Readonly<{
   id?: string;
   readOnly: boolean;
@@ -25,7 +29,7 @@ type AutosizeInputProps = Readonly<{
   onChange: FormEventHandler<HTMLInputElement>;
 }>;
 
-const INPUT_MIN_WIDTH_PX = 15;
+const INPUT_MIN_WIDTH_PX = 20;
 
 const INPUT_FONT_STYLE = css`
   font-size: inherit;
@@ -45,7 +49,7 @@ const SizerDiv = styled.div`
   ${({ theme }) => theme.input.css}
 `;
 
-const Input = styled.input.attrs(AUTOSIZE_INPUT_ATTRS)<{ isInvalid: boolean }>`
+const Input = styled.input.attrs(AUTOSIZE_INPUT_ATTRS)<InputProps>`
   border: 0;
   outline: 0;
   padding: 0;

src/components/IndicatorIcons/index.tsx

@@ -19,6 +19,8 @@ type IndicatorIconsProps = Readonly<{
   onCaretMouseDown?: MouseOrTouchEventHandler;
 }>;
 
+type CaretProps = Pick<IndicatorIconsProps, 'menuOpen' | 'isInvalid'>;
+
 const IndicatorIconsWrapper = styled.div`
   display: flex;
   flex-shrink: 0;
@@ -50,7 +52,7 @@ const Separator = styled.div`
   background-color: ${({ theme }) => theme.color.iconSeparator || theme.color.border};
 `;
 
-const Caret = styled.div<Pick<IndicatorIconsProps, 'menuOpen' | 'isInvalid'>>`
+const Caret = styled.div<CaretProps>`
   transition: ${({ theme }) => theme.icon.caret.transition};
   border-top: ${({ theme }) => theme.icon.caret.size} dashed;
   border-left: ${({ theme }) => theme.icon.caret.size} solid transparent;