perf(searchbox): Memoize onChange handler

bloomreach · Jul 29, 2024 · 07d3fa7 · 07d3fa7
1 parent 25e4c28
commit 07d3fa7
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/src/search/search-box/search-box.tsx b/src/search/search-box/search-box.tsx
@@ -7,6 +7,7 @@ import {
   useContext,
   useEffect,
   useState,
+  useCallback,
 } from 'react';
 
 import { debounce } from '../../utils/debounce';
@@ -56,9 +57,9 @@ export const SearchBox = forwardRef(
       setQuery(event.target.value);
     }, debounceDelay ?? 500);
 
-    const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const onChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
       debouncedSetQuery(event);
-    };
+    }, [debouncedSetQuery]);
 
     return (
       <>