Add the hook file

Author: rleeson

hooks/use-debounced-input/index.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
+
+type DebouncedInputOptions = {
+	delay: number;
+};
+
+/**
+ * Helper hook for input fields that need to debounce the value before using it.
+ *
+ * @param {string}                defaultValue The default value to use.
+ * @param {DebouncedInputOptions} options      Set of options for useDebounce, 350ms is the default
+ *
+ * @returns The input value, the setter and the debounced input value.
+ */
+export function useDebouncedInput(
+	defaultValue: string = '',
+	options: DebouncedInputOptions = { delay: 500 },
+): [string, (value: string) => void, string] {
+	const [input, setInput] = useState<string>(defaultValue);
+	const [debouncedInput, setDebouncedState] = useState(defaultValue);
+	const { delay } = options;
+	const setDebouncedInput = useDebounce(setDebouncedState, delay);
+
+	useEffect(() => {
+		setDebouncedInput(input);
+	}, [input, setDebouncedInput]);
+
+	return [input, setInput, debouncedInput];
+}

hooks/use-debounced-input/readme.md

@@ -0,0 +1,38 @@
+# `useDebouncedInput`
+
+The `useDebouncedInput` hook is a revision of the `@wordpress/components` version of the hook which exposes options, specifically to configure the debounce delay.
+
+## Usage
+
+```js
+import { SearchControl } from '@wordpress/components';
+import { useDebouncedInput } from '@10up/block-components';
+
+function BlockEdit(props) {
+	const [searchInput, setSearchString, searchString] = useDebouncedInput('');
+    ...
+    async fetchTitles => {
+        let options = await apiFetch({
+            path: addQueryArgs('/wp/v2/search', {
+                search: searchString,
+                ...
+            })
+        });
+        options = options.filter(option => option.title !== '');
+
+        return options;
+    };
+    ...
+    return (
+        <>
+            <SearchControl
+				value={searchInput}
+				onChange={(newSearchString: string) => {
+					setSearchString(newSearchString);
+				}}
+			/>
+        ...
+        </>
+    );
+}
+```