docs: add comments to SearchBar and debounce

frontend/app/components/books/SearchBar/SearchBar.tsx

@@ -32,8 +32,17 @@ function SearchBar({ resultCount }: SearchBarProps) {
   const [, setSearchParams] = useSearchParams();
 
   const [inputField, setInputField] = useState(query);
+
+  // This is a debounced version of the input field, which updates only every SEARCH_DEBOUNCE_MS milliseconds.
+  // This is used to avoid making too many requests while the user is typing.
   const debouncedQuery = useDebounce(inputField, SEARCH_DEBOUNCE_MS);
+
+  // This ref is used to determine if the query was changed by the user typing in the input field,
+  // or by some other means (e.g. browser navigation).
   const newQueryFromInputRef = useRef(false);
+
+  // Is the toast that says the query is too long currently open?
+  // We don't want to stack multiple toasts on top of each other.
   const tooLongToastOpenRef = useRef(false);
 
   useEffect(() => {
@@ -62,6 +71,7 @@ function SearchBar({ resultCount }: SearchBarProps) {
     newQueryFromInputRef.current = false;
   }, [debouncedQuery, inputField, query, setSearchParams]);
 
+  // The count of filters currently applied, so we can show a badge on the filter button.
   const filtersCount = Object.values(filters).filter(
     (value) => value !== undefined,
   ).length;

frontend/app/hooks/useDebounce.ts

@@ -10,6 +10,8 @@ function useDebounce<T>(value: T, delay: number): T {
       setDebouncedValue(value);
     }, delay);
 
+    // Whenever useEffect is called again,
+    // this cleanup function will be called to clear the previous timeout.
     return () => {
       window.clearTimeout(timeoutId);
     };