fix(ui): use history.replaceState for search URL sync to prevent page re-renders

setSearchParams from React Router triggers router state updates that cause
the Issues component tree to re-render on each debounced URL update. Switch
to window.history.replaceState which updates the URL silently without
triggering React Router re-renders.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dotta
2026-03-06 08:06:57 -06:00
parent 9d570b3ed7
commit 67bc601258

View File

@@ -14,7 +14,7 @@ import { CircleDot } from "lucide-react";
export function Issues() {
const { selectedCompanyId } = useCompany();
const { setBreadcrumbs } = useBreadcrumbs();
const [searchParams, setSearchParams] = useSearchParams();
const [searchParams] = useSearchParams();
const queryClient = useQueryClient();
const initialSearch = searchParams.get("q") ?? "";
@@ -22,17 +22,15 @@ export function Issues() {
const handleSearchChange = useCallback((search: string) => {
clearTimeout(debounceRef.current);
debounceRef.current = setTimeout(() => {
setSearchParams((prev) => {
const next = new URLSearchParams(prev);
if (search.trim()) {
next.set("q", search.trim());
} else {
next.delete("q");
}
return next;
}, { replace: true });
const url = new URL(window.location.href);
if (search.trim()) {
url.searchParams.set("q", search.trim());
} else {
url.searchParams.delete("q");
}
window.history.replaceState(null, "", url);
}, 300);
}, [setSearchParams]);
}, []);
useEffect(() => {
return () => clearTimeout(debounceRef.current);