Wrap search functions in useDebounced

To reduce the number of API calls, api calls for a search query are debounced
sfbrigade · Sep 12, 2024 · a60a0c8 · a60a0c8
1 parent 4fc681b
commit a60a0c8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/client/src/pages/patients/inputs/HealthcareChoicesSearch.jsx b/client/src/pages/patients/inputs/HealthcareChoicesSearch.jsx
@@ -2,8 +2,9 @@ import PropTypes from 'prop-types';
 
 import { useState, useRef, useEffect } from 'react';
 import { Combobox, useCombobox, ScrollArea } from '@mantine/core';
-
 import { notifications } from '@mantine/notifications';
+import { useDebouncedCallback } from '@mantine/hooks';
+
 import SearchDatabaseInputField from './SearchDatabaseInputField';
 
 import LifelineAPI from '../LifelineAPI.js';
@@ -34,7 +35,7 @@ export default function HealthcareChoicesSearch({ form, choice, initialData }) {
     }
   }, [initialData]);
 
-  const fetchOptions = async (query) => {
+  const fetchOptions = useDebouncedCallback(async (query) => {
     abortController.current?.abort();
     abortController.current = new AbortController();
     setLoading(true);
@@ -59,7 +60,7 @@ export default function HealthcareChoicesSearch({ form, choice, initialData }) {
       abortController.current = undefined;
       setLoading(false);
     }
-  };
+  }, 500);
 
   const combobox = useCombobox({
     onDropdownClose: () => combobox.resetSelectedOption(),

diff --git a/client/src/pages/patients/inputs/MedicalDataSearch.jsx b/client/src/pages/patients/inputs/MedicalDataSearch.jsx
@@ -2,7 +2,9 @@ import PropTypes from 'prop-types';
 
 import { useState, useRef, useEffect } from 'react';
 import { Combobox, useCombobox, Pill, ScrollArea } from '@mantine/core';
+import { useDebouncedCallback } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
+
 import SearchDatabaseInputField from './SearchDatabaseInputField';
 import LifelineAPI from '../LifelineAPI';
 
@@ -40,7 +42,7 @@ export default function MedicalDataSearch({
     }
   }, [initialMedicalData]);
 
-  const fetchOptions = async (query) => {
+  const fetchOptions = useDebouncedCallback(async (query) => {
     abortController.current?.abort();
     abortController.current = new AbortController();
     setLoading(true);
@@ -65,7 +67,7 @@ export default function MedicalDataSearch({
       abortController.current = undefined;
       setLoading(false);
     }
-  };
+  }, 500);
 
   const combobox = useCombobox({
     onDropdownClose: () => combobox.resetSelectedOption(),