(feat) Adding useDebounce to the react utils

packages/framework/esm-framework/docs/API.md

@@ -154,6 +154,7 @@
 ### Other Functions
 
 - [ExtensionSlot](API.md#extensionslot)
+- [useDebounce](API.md#usedebounce)
 
 ### Store Functions
 
@@ -3751,6 +3752,60 @@ Passing a function as children
 
 ___
 
+### useDebounce
+
+▸ **useDebounce**<`T`\>(`value`, `delay?`): `T`
+
+This hook debounces a state variable. That state variable can then be used as the
+value of a controlled input, while the return value of this hook is used for making
+a request.
+
+**`example`**
+
+```tsx
+import { useDebounce } from "@openmrs/esm-react-utils";
+
+function MyComponent() {
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm);
+  const swrResult = useSWR(`/api/search?q=${debouncedSearchTerm}`) 
+
+ return (
+   <Search
+labelText={t('search', 'Search')}
+onChange={(e) => setSearchTerm(e.target.value)}
+value={searchTerm}
+/>
+ )
+}
+
+```
+
+#### Type parameters
+
+| Name |
+| :------ |
+| `T` |
+
+#### Parameters
+
+| Name | Type | Default value | Description |
+| :------ | :------ | :------ | :------ |
+| `value` | `T` | `undefined` | - |
+| `delay` | `number` | `300` | number = 300: The number of milliseconds to wait before updating `debounceValue` |
+
+#### Returns
+
+`T`
+
+debounceValue: The debounced value
+
+#### Defined in
+
+[packages/framework/esm-react-utils/src/useDebounce.ts:33](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-react-utils/src/useDebounce.ts#L33)
+
+___
+
 ## Store Functions
 
 ### createGlobalStore

packages/framework/esm-framework/mock.tsx

@@ -304,3 +304,4 @@ export const showModal = jest.fn();
 export const LeftNavMenu = jest.fn();
 export const setLeftNav = jest.fn();
 export const unsetLeftNav = jest.fn();
+export const useDebounce = jest.fn().mockImplementation((value) => value);

packages/framework/esm-react-utils/src/index.ts

@@ -26,3 +26,4 @@ export * from "./useStore";
 export * from "./useVisit";
 export * from "./useVisitTypes";
 export * from "./usePagination";
+export * from "./useDebounce";

packages/framework/esm-react-utils/src/public.ts

@@ -22,3 +22,4 @@ export * from "./useStore";
 export * from "./useVisit";
 export * from "./useVisitTypes";
 export * from "./usePagination";
+export * from "./useDebounce";

packages/framework/esm-react-utils/src/useDebounce.ts

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+
+/**
+ * This hook debounces a state variable. That state variable can then be used as the
+ * value of a controlled input, while the return value of this hook is used for making
+ * a request.
+ *
+ * @example
+ * ```tsx
+ * import { useDebounce } from "@openmrs/esm-react-utils";
+ *
+ * function MyComponent() {
+ *   const [searchTerm, setSearchTerm] = useState('');
+ *   const debouncedSearchTerm = useDebounce(searchTerm);
+ *   const swrResult = useSWR(`/api/search?q=${debouncedSearchTerm}`)
+ *
+ *  return (
+ *    <Search
+ *      labelText={t('search', 'Search')}
+ *      onChange={(e) => setSearchTerm(e.target.value)}
+ *      value={searchTerm}
+ *    />
+ *  )
+ * }
+ * ```
+ *
+ * @param value: The value that will be used to set `debounceValue`
+ * @param delay number = 300: The number of milliseconds to wait before updating `debounceValue`
+ * @returns debounceValue: The debounced value
+ */
+export function useDebounce<T>(value: T, delay: number = 300) {
+  const [debounceValue, setDebounceValue] = useState<T>(value);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebounceValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debounceValue;
+}