fix: remove just-debounce-it (coder#9707)

Parkreiner · web-flow · commit 2caf7a7cebab · 2023-09-18T14:20:11.000Z
* fix: Switch UserAutocomplete to useDebouncedFunction

* fix: switch UserOrGroupAutocomplete to useDebouncedFunction

* chore: remove just-debounce-it dependency

* docs: Clean up comments
diff --git a/site/package.json b/site/package.json
@@ -158,7 +158,6 @@
     "jest-runner-eslint": "2.1.0",
     "jest-websocket-mock": "2.5.0",
     "jest_workaround": "0.1.14",
-    "just-debounce-it": "3.2.0",
     "msw": "1.3.0",
     "prettier": "3.0.0",
     "protobufjs": "7.2.4",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
@@ -6,10 +6,17 @@ import { useMachine } from "@xstate/react";
 import { User } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/AvatarData/AvatarData";
-import debounce from "just-debounce-it";
-import { ChangeEvent, ComponentProps, FC, useEffect, useState } from "react";
+import {
+  ChangeEvent,
+  ComponentProps,
+  FC,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { searchUserMachine } from "xServices/users/searchUserXService";
 import Box from "@mui/material/Box";
+import { useDebouncedFunction } from "hooks/debounce";
 
 export type UserAutocompleteProps = {
   value: User | null;
@@ -31,16 +38,23 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
   const [searchState, sendSearch] = useMachine(searchUserMachine);
   const { searchResults } = searchState.context;
 
-  // seed list of options on the first page load if a user pases in a value
-  // since some organizations have long lists of users, we do not load all options on page load.
+  // Seed list of options on the first page load if a user passes in a value.
+  // Since some organizations have long lists of users, we do not want to load
+  // all options on page load.
+  const onMountRef = useRef(value);
   useEffect(() => {
-    if (value) {
-      sendSearch("SEARCH", { query: value.email });
+    const mountValue = onMountRef.current;
+    if (mountValue) {
+      sendSearch("SEARCH", { query: mountValue.email });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO look into this
-  }, []);
 
-  const handleFilterChange = debounce(
+    // This isn't in XState's docs, but its source code guarantees that the
+    // memory reference of sendSearch will stay stable across renders. This
+    // useEffect call will behave like an on-mount effect and will not ever need
+    // to resynchronize
+  }, [sendSearch]);
+
+  const { debounced: debouncedOnChange } = useDebouncedFunction(
     (event: ChangeEvent<HTMLInputElement>) => {
       sendSearch("SEARCH", { query: event.target.value });
     },
@@ -93,7 +107,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
             className={styles.textField}
             InputProps={{
               ...params.InputProps,
-              onChange: handleFilterChange,
+              onChange: debouncedOnChange,
               startAdornment: value && (
                 <Avatar size="sm" src={value.avatar_url}>
                   {value.username}
diff --git a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx
@@ -5,11 +5,11 @@ import Autocomplete from "@mui/material/Autocomplete";
 import { useMachine } from "@xstate/react";
 import { Group, User } from "api/typesGenerated";
 import { AvatarData } from "components/AvatarData/AvatarData";
-import debounce from "just-debounce-it";
 import { ChangeEvent, useState } from "react";
 import { getGroupSubtitle } from "utils/groups";
 import { searchUsersAndGroupsMachine } from "xServices/template/searchUsersAndGroupsXService";
 import Box from "@mui/material/Box";
+import { useDebouncedFunction } from "hooks/debounce";
 
 export type UserOrGroupAutocompleteValue = User | Group | null;
 
@@ -44,7 +44,7 @@ export const UserOrGroupAutocomplete: React.FC<
     return !excludeIds.includes(result.id);
   });
 
-  const handleFilterChange = debounce(
+  const { debounced: handleFilterChange } = useDebouncedFunction(
     (event: ChangeEvent<HTMLInputElement>) => {
       sendSearch("SEARCH", { query: event.target.value });
     },
