Use properly memoized function with throttling not debouncing

Author: amcaplan

packages/cli-kit/package.json

@@ -170,7 +170,7 @@
     "@types/diff": "^5.2.3",
     "@types/fs-extra": "9.0.13",
     "@types/gradient-string": "^1.1.2",
-    "@types/lodash": "4.17.14",
+    "@types/lodash": "4.17.19",
     "@types/react": "18.2.0",
     "@types/semver": "^7.5.2",
     "@types/which": "3.0.4",

packages/cli-kit/src/private/node/ui/components/AutocompletePrompt.tsx

@@ -3,7 +3,7 @@ import {InfoTableProps} from './Prompts/InfoTable.js'
 import {TextInput} from './TextInput.js'
 import {InfoMessageProps} from './Prompts/InfoMessage.js'
 import {Message, PromptLayout} from './Prompts/PromptLayout.js'
-import {debounce} from '../../../../public/common/function.js'
+import {throttle} from '../../../../public/common/function.js'
 import {AbortSignal} from '../../../../public/node/abort.js'
 import usePrompt, {PromptState} from '../hooks/use-prompt.js'
 import React, {ReactElement, useCallback, useEffect, useRef, useState} from 'react'
@@ -84,40 +84,40 @@ function AutocompletePrompt<T>({
   const searchTermRef = useRef('')
   searchTermRef.current = searchTerm
 
-  // disable exhaustive-deps because we want to memoize the debounce function itself
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debounceSearch = useCallback(
-    debounce(
-      (term: string) => {
-        setLoadingWhenSlow.current = setTimeout(() => {
-          setPromptState(PromptState.Loading)
-        }, 100)
-        paginatedSearch(term)
-          .then((result) => {
-            // while we were waiting for the promise to resolve, the user
-            // has emptied the search term, so we want to show the default
-            // choices instead
-            if (searchTermRef.current.length === 0) {
-              setSearchResults(choices)
-              setHasMorePages(initialHasMorePages)
-            } else {
-              setSearchResults(result.data)
-              setHasMorePages(result.meta?.hasNextPage ?? false)
-            }
+  // useMemo ensures debounceSearch is not recreated on every render
+  const debounceSearch = React.useMemo(
+    () =>
+      throttle(
+        (term: string) => {
+          setLoadingWhenSlow.current = setTimeout(() => {
+            setPromptState(PromptState.Loading)
+          }, 100)
+          paginatedSearch(term)
+            .then((result) => {
+              // while we were waiting for the promise to resolve, the user
+              // has emptied the search term, so we want to show the default
+              // choices instead
+              if (searchTermRef.current.length === 0) {
+                setSearchResults(choices)
+                setHasMorePages(initialHasMorePages)
+              } else {
+                setSearchResults(result.data)
+                setHasMorePages(result.meta?.hasNextPage ?? false)
+              }
 
-            setPromptState(PromptState.Idle)
-          })
-          .catch(() => {
-            setPromptState(PromptState.Error)
-          })
-          .finally(() => {
-            clearTimeout(setLoadingWhenSlow.current)
-          })
-      },
-      300,
-      {leading: true},
-    ),
-    [initialHasMorePages, choices, paginatedSearch, searchResults],
+              setPromptState(PromptState.Idle)
+            })
+            .catch(() => {
+              setPromptState(PromptState.Error)
+            })
+            .finally(() => {
+              clearTimeout(setLoadingWhenSlow.current)
+            })
+        },
+        400,
+        {leading: true, trailing: true},
+      ),
+    [paginatedSearch],
   )
 
   return (

packages/cli-kit/src/public/common/function.ts

@@ -1,6 +1,7 @@
 import lodashMemoize from 'lodash/memoize.js'
 import lodashDebounce from 'lodash/debounce.js'
-import type {DebouncedFunc, DebounceSettings} from 'lodash'
+import lodashThrottle from 'lodash/throttle.js'
+import type {DebouncedFunc, DebounceSettings, ThrottleSettings} from 'lodash'
 
 /**
  * Creates a function that memoizes the result of func. If resolver is provided it determines the cache key for
@@ -27,7 +28,7 @@ export function memoize<T extends (...args: any) => any>(func: T, resolver?: (..
  * Note: If leading and trailing options are true, func is invoked on the trailing edge of the timeout only
  * if the the debounced function is invoked more than once during the wait timeout.
  *
- * See David Corbacho’s article for details over the differences between _.debounce and _.throttle.
+ * See David Corbacho's article for details over the differences between _.debounce and _.throttle.
  *
  * @param func - The function to debounce.
  * @param wait - The number of milliseconds to delay.
@@ -42,3 +43,25 @@ export function debounce<T extends (...args: any) => any>(
 ): DebouncedFunc<T> {
   return lodashDebounce(func, wait, options)
 }
+
+/**
+ * Creates a throttled function that only invokes func at most once per every wait milliseconds.
+ * The throttled function comes with a cancel method to cancel delayed invocations and a flush method to immediately invoke them.
+ * Provide an options object to indicate whether func should be invoked on the leading and/or trailing edge of the wait timeout.
+ * Subsequent calls to the throttled function return the result of the last func invocation.
+ *
+ * See David Corbacho's article for details over the differences between _.debounce and _.throttle.
+ *
+ * @param func - The function to throttle.
+ * @param wait - The number of milliseconds to throttle invocations to.
+ * @param options - The options object.
+ * @returns Returns the new throttled function.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function throttle<T extends (...args: any) => any>(
+  func: T,
+  wait?: number,
+  options?: ThrottleSettings,
+): DebouncedFunc<T> {
+  return lodashThrottle(func, wait, options)
+}