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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user