hanh.tonguyen/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
ui/src/pages/Issues.tsx
View File

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