Description
Multiple components call useSearchParams() at the top level but only read the value inside useEffect or callbacks — never in JSX. This subscribes the entire component tree to every URL query change, causing unnecessary re-renders.
Vercel React Best Practices Rule: rerender-defer-reads (5.2)
Files to change
1. surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx (~line 388)
searchParams.get("commentId") only used in effect. This is a very large component tree.
2. surfsense_web/app/dashboard/page.tsx (~line 92)
searchParams.toString() only used in redirect effect.
3. surfsense_web/components/public-chat/public-chat-footer.tsx (~line 18)
searchParams.get("action") only used in effect.
4. surfsense_web/components/TokenHandler.tsx (~line 29)
Token extraction only in effect.
What to do
Read from window.location.search inside the effect instead of subscribing via the hook:
// Before
const searchParams = useSearchParams();
useEffect(() => {
const commentId = searchParams.get("commentId");
// ...
}, [searchParams]);
// After
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const commentId = params.get("commentId");
// ...
}, []); // run once on mount, or subscribe to popstate if needed
For the redirect case (dashboard/page.tsx), build the query string inside the effect:
useEffect(() => {
const query = window.location.search;
router.replace(`/dashboard/${searchSpaces[0].id}/new-chat${query}`);
}, [isLoading, searchSpaces, router]);
Acceptance criteria
- No
useSearchParams() call in files where the value is only used in effects/callbacks
- The components no longer re-render on unrelated query string changes
- All existing functionality (comment deep-linking, token handling, redirects) still works
Description
Multiple components call
useSearchParams()at the top level but only read the value insideuseEffector callbacks — never in JSX. This subscribes the entire component tree to every URL query change, causing unnecessary re-renders.Vercel React Best Practices Rule:
rerender-defer-reads(5.2)Files to change
1.
surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx(~line 388)searchParams.get("commentId")only used in effect. This is a very large component tree.2.
surfsense_web/app/dashboard/page.tsx(~line 92)searchParams.toString()only used in redirect effect.3.
surfsense_web/components/public-chat/public-chat-footer.tsx(~line 18)searchParams.get("action")only used in effect.4.
surfsense_web/components/TokenHandler.tsx(~line 29)Token extraction only in effect.
What to do
Read from
window.location.searchinside the effect instead of subscribing via the hook:For the redirect case (
dashboard/page.tsx), build the query string inside the effect:Acceptance criteria
useSearchParams()call in files where the value is only used in effects/callbacks