Skip to content

Defer useSearchParams() reads to the usage point instead of subscribing at component level #1051

@MODSetter

Description

@MODSetter

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

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions