debounce fix

Author: dwarfered

components/app-registrations/CredentialStatusGrid.tsx

@@ -15,15 +15,15 @@ import {
 } from "@fluentui/react-components";
 
 import { useIsAuthenticated } from "@azure/msal-react";
-import { useState, useMemo } from "react";
+import { useState, useMemo, useRef } from "react";
 import useSWR from "swr";
 
 import { Application, generateApplications } from "./CredentialStatusGrid.data-model";
 import { credentialStatusColumns } from "./CredentialStatusGrid.columns";
 import { fetcher, ODataResponse } from "@/lib/utils/msGraphFetcher";
 import { graphConfig } from "@/lib/msalConfig";
 import { SkeletonGrid } from "../SkeletonGrid";
-import { useDebouncedValue } from "@/lib/utils/common";
+import useDebounce from "@/lib/utils/common";
 
 function useAuthenticatedSWR<T>(url: string, isAuthenticated: boolean) {
   return useSWR<ODataResponse<T>>(isAuthenticated ? url : null, fetcher);
@@ -97,10 +97,17 @@ function useFilteredCredentials(
 
 export default function CredentialStatusGrid() {
   const isAuthenticated = useIsAuthenticated();
+  
   const [searchTerm, setSearchTerm] = useState("");
-  const debouncedSearchTerm = useDebouncedValue(searchTerm, 300);
-  const onSearchChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-    setSearchTerm(e.target.value);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debouncedSetSearchTerm = useDebounce((value: string) => {
+    setSearchTerm(value);
+  }, 300);
+  const handleChange = () => {
+    if (inputRef.current) {
+      debouncedSetSearchTerm(inputRef.current.value);
+    }
+  };
 
   const {
     data: appCredentialData,
@@ -119,7 +126,7 @@ export default function CredentialStatusGrid() {
   const filteredItems = useFilteredCredentials(
     isAuthenticated,
     appCredentialData?.value,
-    debouncedSearchTerm
+    searchTerm
   );
 
   if (appCredentialIsLoading) {
@@ -177,9 +184,9 @@ export default function CredentialStatusGrid() {
           type="text"
           size="small"
           contentBefore={<SearchRegular />}
-          onChange={onSearchChange}
+          ref={inputRef}
+          onChange={handleChange}
           placeholder="Filter by display name"
-          value={searchTerm}
         />
       </div>
 

components/enterprise-applications/SamlStatusGrid.tsx

@@ -15,15 +15,15 @@ import {
 } from "@fluentui/react-components";
 
 import { useIsAuthenticated } from "@azure/msal-react";
-import { useState, useMemo } from "react";
+import { useState, useMemo, useRef } from "react";
 import useSWR from "swr";
 
 import { SamlStatus, generateSamlStatus } from "./SamlStatusGrid.data-model";
 import { samlStatusColumns } from "./SamlStatusGrid.columns";
 import { fetcher, ODataResponse } from "@/lib/utils/msGraphFetcher";
 import { graphConfig } from "@/lib/msalConfig";
 import { SkeletonGrid } from "../SkeletonGrid";
-import { useDebouncedValue } from "@/lib/utils/common";
+import useDebounce from "@/lib/utils/common";
 
 function useAuthenticatedSWR<T>(url: string, isAuthenticated: boolean) {
   return useSWR<ODataResponse<T>>(isAuthenticated ? url : null, fetcher);
@@ -54,10 +54,17 @@ function useFilteredSamlStatus(
 
 export default function SamlStatusGrid() {
   const isAuthenticated = useIsAuthenticated();
+
   const [searchTerm, setSearchTerm] = useState("");
-  const debouncedSearchTerm = useDebouncedValue(searchTerm, 300);
-  const onSearchChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-    setSearchTerm(e.target.value);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debouncedSetSearchTerm = useDebounce((value: string) => {
+    setSearchTerm(value);
+  }, 300);
+  const handleChange = () => {
+    if (inputRef.current) {
+      debouncedSetSearchTerm(inputRef.current.value);
+    }
+  };
 
   const {
     data: samlStatusData,
@@ -76,7 +83,7 @@ export default function SamlStatusGrid() {
   const filteredItems = useFilteredSamlStatus(
     isAuthenticated,
     samlStatusData?.value,
-    debouncedSearchTerm
+    searchTerm
   );
 
   if (samlStatusIsLoading) {
@@ -134,9 +141,9 @@ export default function SamlStatusGrid() {
           type="text"
           size="small"
           contentBefore={<SearchRegular />}
-          onChange={onSearchChange}
+          ref={inputRef}
+          onChange={handleChange}
           placeholder="Filter by display name"
-          value={searchTerm}
         />
       </div>
 

components/enterprise-applications/app-role-permissions-grid/AppRolePermissionsGrid.tsx

@@ -18,7 +18,7 @@ import {
 } from "@fluentui/react-components";
 
 import { useIsAuthenticated } from "@azure/msal-react";
-import { useState, useMemo } from "react";
+import { useState, useMemo, useRef } from "react";
 import useSWR from "swr";
 
 import {
@@ -33,7 +33,7 @@ import { graphConfig } from "@/lib/msalConfig";
 import { appRoleColumns } from "./AppRolePermissionsGrid.columns";
 import { findEntraOpsClassificationByPermission } from "@/lib/utils/entraOpsHelper";
 import { SkeletonGrid } from "@/components/SkeletonGrid";
-import { useDebouncedValue } from "@/lib/utils/common";
+import useDebounce from "@/lib/utils/common";
 
 function useAuthenticatedSWR<T>(url: string, isAuthenticated: boolean) {
   return useSWR<ODataResponse<T>>(isAuthenticated ? url : null, fetcher);
@@ -108,10 +108,17 @@ function useFilter(
 
 export default function AppRolePermissionsGrid() {
   const isAuthenticated = useIsAuthenticated();
+
   const [searchTerm, setSearchTerm] = useState("");
-  const debouncedSearchTerm = useDebouncedValue(searchTerm, 300);
-  const onSearchChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-    setSearchTerm(e.target.value);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debouncedSetSearchTerm = useDebounce((value: string) => {
+    setSearchTerm(value);
+  }, 300);
+  const handleChange = () => {
+    if (inputRef.current) {
+      debouncedSetSearchTerm(inputRef.current.value);
+    }
+  };
 
   const {
     data: selectedServicePrincipalData,
@@ -144,18 +151,18 @@ export default function AppRolePermissionsGrid() {
     isAuthenticated,
     appRolesAssignedToData?.value,
     selectedServicePrincipalData?.value,
-    debouncedSearchTerm
+    searchTerm
   );
 
-    if (appRolesAssignedToIsLoading) {
-      // Optionally render a skeleton or partial grid
-      return (
-        <div style={{ margin: "6px" }}>
-          <Body1>Loading...</Body1>
-          <SkeletonGrid columns={5} />
-        </div>
-      );
-    }
+  if (appRolesAssignedToIsLoading) {
+    // Optionally render a skeleton or partial grid
+    return (
+      <div style={{ margin: "6px" }}>
+        <Body1>Loading...</Body1>
+        <SkeletonGrid columns={5} />
+      </div>
+    );
+  }
 
   return (
     <div>
@@ -180,9 +187,9 @@ export default function AppRolePermissionsGrid() {
           type="text"
           size="small"
           contentBefore={<SearchRegular />}
-          onChange={onSearchChange}
+          ref={inputRef}
+          onChange={handleChange}
           placeholder="Filter by permission"
-          value={searchTerm}
         />
       </div>
 

lib/utils/common.ts

@@ -1,25 +1,37 @@
-import { useEffect, useState } from "react";
+// useDebounce.ts
+import { useRef, useEffect, useCallback } from "react";
 
-export function useDebouncedValue(
-    value: string,
-    delay: number,
-    minLength: number = 3
-  ): string {
-    const [debouncedValue, setDebouncedValue] = useState<string>("");
-  
-    useEffect(() => {
-      if (value.length >= minLength) {
-        const handler = setTimeout(() => {
-          setDebouncedValue(value);
-        }, delay);
-  
-        return () => {
-          clearTimeout(handler);
-        };
-      } else {
-        setDebouncedValue(""); // To reset when under minLength
+/**
+ * Custom hook to debounce a function.
+ * @param callback The function to debounce.
+ * @param delay The debounce delay in milliseconds.
+ * @returns The debounced function.
+ */
+function useDebounce(callback: (...args: string[]) => void, delay: number) {
+  const timeoutRef = useRef<number | undefined>();
+
+  const debouncedFunction = useCallback(
+    (...args: string[]) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = window.setTimeout(() => {
+        callback(...args);
+      }, delay);
+    },
+    [callback, delay]
+  );
+
+  useEffect(() => {
+    // Cleanup on unmount
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
       }
-    }, [value, delay, minLength]);
-  
-    return debouncedValue;
-  }
+    };
+  }, []);
+
+  return debouncedFunction;
+}
+
+export default useDebounce;