From ffd7d4c7282862dc3627bb48f5019c09014677f8 Mon Sep 17 00:00:00 2001 From: Martin Alexander Kaminski Date: Thu, 12 Nov 2026 22:10:10 +0100 Subject: [PATCH 1/2] docs: add comments to SearchBar about debounce and refs --- frontend/app/components/books/SearchBar/SearchBar.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/frontend/app/components/books/SearchBar/SearchBar.tsx b/frontend/app/components/books/SearchBar/SearchBar.tsx index 4bfa4fc3..9c833279 100644 --- a/frontend/app/components/books/SearchBar/SearchBar.tsx +++ b/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; From c11c72178c6ffdadb00508534c23bfdb0272644d Mon Sep 17 00:00:00 2001 From: Martin Alexander Kaminski Date: Thu, 12 Nov 2026 22:11:07 +0100 Subject: [PATCH 2/2] docs: add comment about cleanup in useDebounce --- frontend/app/hooks/useDebounce.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/app/hooks/useDebounce.ts b/frontend/app/hooks/useDebounce.ts index 123ac195..8923bf71 100644 --- a/frontend/app/hooks/useDebounce.ts +++ b/frontend/app/hooks/useDebounce.ts @@ -10,6 +10,8 @@ function useDebounce(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); };