refactor custom hooks; update linters

Author: based-ghost

.eslintrc

@@ -1,15 +1,13 @@
 {
   "parser": "@typescript-eslint/parser",
   "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
-    "prettier"
+    "plugin:@typescript-eslint/recommended"
   ],
   "plugins": [
-    "prettier",
+    "@typescript-eslint",
     "react-hooks",
-    "@typescript-eslint"
+    "prettier"
   ],
   "env": {
     "browser": true,
@@ -19,6 +17,8 @@
   },
   "rules": {
     "react/prop-types": 0,
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
     "semi": "off",
     "sort-keys": "off",
     "global-require": "off",
@@ -32,13 +32,14 @@
   },
   "parserOptions": {
     "sourceType": "module",
+    "ecmaVersion": 2020,
     "ecmaFeatures": {
-      "impliedStrict": true,
       "jsx": true
     }
   },
   "settings": {
     "react": {
+      "pragma": "React",
       "version": "detect"
     }
   }

src/Select.tsx

@@ -51,7 +51,7 @@ import type {
 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 { useDebounce, useLatestRef, useCallbackRef, useMenuOptions, useMountEffect, useUpdateEffect, useMenuPosition } from './hooks';
 import { isBoolean, isFunction, isPlainObject, mergeDeep, suppressEvent, normalizeValue, isTouchDevice, isArrayWithLength } from './utils';
 
 type SelectProps = Readonly<{
@@ -308,7 +308,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
   );
 
   // Custom hook abstraction that handles calculating menuHeightCalc (defaults to menuMaxHeight) / handles executing callbacks/logic on menuOpen state change.
-  const [menuStyleTop, menuHeightCalc] = useMenuPositioner(
+  const { menuStyleTop, menuHeightCalc } = useMenuPosition(
     menuRef,
     controlRef,
     menuOpen,
@@ -320,7 +320,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
     onMenuOpen,
     onMenuClose,
     menuScrollDuration,
-    scrollMenuIntoView,
+    scrollMenuIntoView
   );
 
   const blurInput = (): void => inputRef.current?.blur();
@@ -402,7 +402,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
         }
       }
     }),
-    [getOptionValueFn, getOptionLabelFn, openMenuAndFocusOption]
+    [menuOpenRef, getOptionValueFn, getOptionLabelFn, openMenuAndFocusOption]
   );
 
   /**
@@ -423,7 +423,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
       onChangeEvtValue.current = false;
       onSearchChangeFn(debouncedInputValue);
     }
-  }, [onSearchChangeFn, debouncedInputValue]);
+  }, [onSearchChangeFn, onSearchChangeIsFn, debouncedInputValue]);
 
   /**
    * useUpdateEffect
@@ -439,7 +439,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
 
       onOptionChangeFn(normalSelectedOpts);
     }
-  }, [onOptionChangeFn, isMulti, selectedOption]);
+  }, [onOptionChangeFn, onOptionChangeIsFn, isMulti, selectedOption]);
 
   /**
    * useUpdateEffect
@@ -463,7 +463,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
     }
 
     prevMenuOptionsLength.current = curLength;
-  }, [async, options, menuOptions]);
+  }, [async, options, menuOpenRef, menuOptions]);
 
   const selectOptionFromFocused = (): void => {
     const { index, ...menuOpt } = focusedOption;

src/hooks/index.ts

@@ -4,4 +4,4 @@ export { default as useMountEffect } from './useMountEffect';
 export { default as useMenuOptions } from './useMenuOptions';
 export { default as useCallbackRef } from './useCallbackRef';
 export { default as useUpdateEffect } from './useUpdateEffect';
-export { default as useMenuPositioner } from './useMenuPositioner';
+export { default as useMenuPosition } from './useMenuPosition';

src/hooks/useCallbackRef.ts

@@ -2,24 +2,21 @@ import type { CallbackFn } from '../types';
 import { useEffect, useRef, useCallback } from 'react';
 
 /**
- * Hook that converts a callback to a ref to avoid triggering re-renders when
- * passed as a prop or avoid re-executing effects when passed as a dependency
+ * Creates a stable callback function that has access to the latest
+ * state and can be used within event handlers and effect callbacks.
  *
  * @param callback the callback to write to ref object
  */
 const useCallbackRef = <T extends CallbackFn>(callback?: T): T => {
-  const callbackRef = useRef(callback);
+  const ref = useRef(callback);
 
   useEffect(() => {
-    callbackRef.current = callback;
+    ref.current = callback;
   });
 
-  return useCallback(
-    ((...args) => {
-      return callbackRef.current?.(...args);
-    }) as T,
-    []
-  );
+  return useCallback<CallbackFn>((...args) => {
+    return ref.current?.(...args);
+  }, []) as T;
 };
 
 export default useCallbackRef;

src/hooks/useMenuOptions.ts

@@ -32,7 +32,7 @@ const useMenuOptions = (
 ): MenuOption[] => {
   const getIsOptionDisabledFn = useCallbackRef(getIsOptionDisabled || FUNCTIONS.isOptionDisabled);
   const getFilterOptionStringFn = useCallbackRef(getFilterOptionString || FUNCTIONS.optionFilter);
-  const hideSelectedOptionsOrDefault = isBoolean(hideSelectedOptions) ? hideSelectedOptions : isMulti;
+  const hideSelectedOptsOrDefault = isBoolean(hideSelectedOptions) ? hideSelectedOptions : isMulti;
   const searchValue = !async ? debouncedInputValue : ''; // prevent recomputing on input mutations in async mode
 
   const menuOptions = useMemo<MenuOption[]>(() => {
@@ -44,7 +44,9 @@ const useMenuOptions = (
       if (!matchVal) return true;
       const filterVal = getFilterOptionStringFn(option);
       const normalFilterVal = trimAndFormatFilterStr(filterVal, filterIgnoreCase, filterIgnoreAccents);
-      return isFilterMatchAny ? normalFilterVal.includes(matchVal) : normalFilterVal.startsWith(matchVal);
+      return isFilterMatchAny
+        ? normalFilterVal.includes(matchVal)
+        : normalFilterVal.startsWith(matchVal);
     };
 
     const parseMenuOption = (data: OptionData): MenuOption | undefined => {
@@ -53,7 +55,7 @@ const useMenuOptions = (
       const isDisabled = getIsOptionDisabledFn(data);
       const isSelected = selectedValues.includes(value);
       const menuOption: MenuOption = { data, value, label, isDisabled, isSelected };
-      return (!isOptionFilterMatch(menuOption) || (hideSelectedOptionsOrDefault && isSelected))
+      return !isOptionFilterMatch(menuOption) || (hideSelectedOptsOrDefault && isSelected)
         ? undefined
         : menuOption;
     };
@@ -74,7 +76,7 @@ const useMenuOptions = (
     filterIgnoreAccents,
     getIsOptionDisabledFn,
     getFilterOptionStringFn,
-    hideSelectedOptionsOrDefault
+    hideSelectedOptsOrDefault
   ]);
 
   return menuOptions;

src/hooks/useMenuPositioner.ts src/hooks/useMenuPosition.tssrc/hooks/useMenuPositioner.ts renamed to src/hooks/useMenuPosition.ts

@@ -1,19 +1,24 @@
-import type { CallbackFn } from '../types';
 import useLatestRef from './useLatestRef';
+import type { CallbackFn } from '../types';
 import useCallbackRef from './useCallbackRef';
 import useUpdateEffect from './useUpdateEffect';
 import { MenuPositionEnum } from '../constants';
 import { useState, useRef, type RefObject } from 'react';
 import { calculateMenuTop, menuFitsBelowControl, scrollMenuIntoViewOnOpen } from '../utils';
 
+type MenuPosition = Readonly<{
+  menuStyleTop?: string;
+  menuHeightCalc: number;
+}>;
+
 /**
  * Handle calculating and maintaining the menuHeight used by react-window.
  * Handle scroll animation and callback execution when menuOpen = true.
  * Handle resetting menuHeight back to the menuHeightDefault and callback execution when menuOpen = false.
  * Use ref to track if the menuHeight was resized, and if so, set the menu height back to default (avoids uncessary renders) with call to setMenuHeight.
  * Handle determining where to place the menu in relation to control - when menuPosition = 'top' or menuPosition = 'bottom' and there is not sufficient space below control, place on top.
  */
-const useMenuPositioner = (
+const useMenuPosition = (
   menuRef: RefObject<HTMLElement | null>,
   controlRef: RefObject<HTMLElement | null>,
   menuOpen: boolean,
@@ -26,7 +31,7 @@ const useMenuPositioner = (
   onMenuClose?: CallbackFn,
   menuScrollDuration?: number,
   scrollMenuIntoView?: boolean
-): [string | undefined, number] => {
+): MenuPosition => {
   const isMenuTopPosition =
     menuPosition === MenuPositionEnum.TOP ||
     (menuPosition === MenuPositionEnum.AUTO && !menuFitsBelowControl(menuRef.current));
@@ -65,18 +70,23 @@ const useMenuPositioner = (
   }, [
     menuRef,
     menuOpen,
+    shouldScrollRef,
     menuHeightDefault,
     scrollMenuIntoView,
     menuScrollDuration,
     onMenuOpenFn,
     onMenuCloseFn
   ]);
 
-  // Calculated menu height passed react-window; calculate MenuWrapper div 'top' style prop if menu is positioned above control
+  // calculate menu height for react-window
+  // calculate MenuWrapper el 'top' css prop (if menu is positioned above control)
   const menuHeightCalc = Math.min(menuHeight, menuOptionsLength * menuItemSize);
   const menuStyleTop = isMenuTopPosition ? calculateMenuTop(menuHeightCalc, menuRef.current, controlRef.current) : undefined;
 
-  return [menuStyleTop, menuHeightCalc];
+  return {
+    menuStyleTop,
+    menuHeightCalc
+  };
 };
 
-export default useMenuPositioner;
+export default useMenuPosition;

src/hooks/useMountEffect.ts

@@ -6,6 +6,7 @@ import { useEffect, type EffectCallback } from 'react';
  * @param effect the effect to execute
  */
 const useMountEffect = (effect: EffectCallback): void => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(effect, []);
 };
 

src/hooks/useUpdateEffect.ts

@@ -1,13 +1,12 @@
-import { useRef, useEffect } from 'react';
+import {useRef, useEffect, type EffectCallback, type DependencyList} from 'react';
 
 /**
- * Run an effect only on updates.
- * Skip the first effect execution that occurrs on initial mount.
+ * `React.useEffect` that will not run on the first render.
  *
  * @param effect the effect to execute
  * @param deps the dependency list
  */
-const useUpdateEffect: typeof useEffect = (effect, deps): void => {
+const useUpdateEffect = (effect: EffectCallback, deps?: DependencyList): void => {
   const isFirstRender = useRef(true);
 
   useEffect(() => {
@@ -16,7 +15,8 @@ const useUpdateEffect: typeof useEffect = (effect, deps): void => {
     } else {
       return effect();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 };
 
-export default useUpdateEffect;
+export default useUpdateEffect;

tsconfig.json

@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
     "jsx": "react",
-    "target": "ES2020",
+    "target": "ESNext",
     "module": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "moduleResolution": "node",
     "strict": true,
     "skipLibCheck": true,