From ce0183579ae4a0d5f4b68da4508ea071021530e4 Mon Sep 17 00:00:00 2001
From: David Clark <dclark45@gmail.com>
Date: Tue, 23 Jun 2026 21:35:41 -0400
Subject: [PATCH 1/2] search bar performance improvement - flush debounce on
 enter

---
 .../[campaignId]/campaign-events-modal.tsx        | 15 +++++----------
 apps/web/ui/shared/search-box.tsx                 |  8 ++++++++
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/campaigns/[campaignId]/campaign-events-modal.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/campaigns/[campaignId]/campaign-events-modal.tsx
index 1f9d9215d4b..ca291abcc86 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/campaigns/[campaignId]/campaign-events-modal.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/campaigns/[campaignId]/campaign-events-modal.tsx
@@ -7,7 +7,6 @@ import { buildUrl, fetcher } from "@dub/utils";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import useSWR from "swr";
-import { useDebouncedCallback } from "use-debounce";
 import { CampaignEvent, EventStatus } from "./campaign-events";
 import { campaignEventsColumns } from "./campaign-events-columns";
 
@@ -33,12 +32,6 @@ export function CampaignEventsModal({
   const [search, setSearch] = useState("");
   const [debouncedSearch, setDebouncedSearch] = useState("");
 
-  const debounced = useDebouncedCallback((value) => {
-    setDebouncedSearch(value);
-    // Reset pagination to page 1 when search changes
-    setPagination((prev) => ({ ...prev, pageIndex: 1 }));
-  }, 500);
-
   const {
     data: events,
     error,
@@ -121,9 +114,11 @@ export function CampaignEventsModal({
       <div className="flex-shrink-0 border-b border-neutral-200 px-4 py-3">
         <SearchBox
           value={search}
-          onChange={(value) => {
-            setSearch(value);
-            debounced(value);
+          onChange={setSearch}
+          onChangeDebounced={(value) => {
+            setDebouncedSearch(value);
+            // Reset pagination to page 1 when search changes
+            setPagination((prev) => ({ ...prev, pageIndex: 1 }));
           }}
           placeholder="Search by partner name or email..."
           loading={isLoading && debouncedSearch.length > 0}
diff --git a/apps/web/ui/shared/search-box.tsx b/apps/web/ui/shared/search-box.tsx
index 505a1257569..572cfb059e9 100644
--- a/apps/web/ui/shared/search-box.tsx
+++ b/apps/web/ui/shared/search-box.tsx
@@ -91,11 +91,19 @@ export const SearchBox = forwardRef(
             onChange(e.target.value);
             debounced(e.target.value);
           }}
+          onKeyDown={(e) => {
+            // Commit the search immediately on Enter rather than waiting out the
+            // debounce. isComposing guards against firing mid-IME-composition.
+            if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+              debounced.flush();
+            }
+          }}
           autoCapitalize="none"
         />
         {showClearButton && value.length > 0 && (
           <button
             onClick={() => {
+              debounced.cancel();
               onChange("");
               onChangeDebounced?.("");
             }}

From eb6fc81396e8e33b4a47f3c2c089f4fb926ad460 Mon Sep 17 00:00:00 2001
From: David Clark <dclark45@gmail.com>
Date: Wed, 24 Jun 2026 01:24:10 -0400
Subject: [PATCH 2/2] search bar performance improvement - shallow URL updates
 (skip empty RSC round-trips)

---
 .../(dashboard)/partners/network/page.tsx     |   1 +
 .../(ee)/settings/domains/page-client.tsx     |  11 +-
 .../[slug]/links/folders/page-client.tsx      |  14 +--
 .../[slug]/links/tags/page-client.tsx         |  13 +-
 apps/web/tests/ui/use-router-stuff.test.ts    | 114 ++++++++++++++++++
 apps/web/ui/shared/search-box.tsx             |  20 +--
 packages/ui/src/hooks/use-router-stuff.ts     |  22 ++++
 7 files changed, 152 insertions(+), 43 deletions(-)
 create mode 100644 apps/web/tests/ui/use-router-stuff.test.ts

diff --git a/apps/web/app/(ee)/admin.dub.co/(dashboard)/partners/network/page.tsx b/apps/web/app/(ee)/admin.dub.co/(dashboard)/partners/network/page.tsx
index d29c5a3bd30..f224e57f8cb 100644
--- a/apps/web/app/(ee)/admin.dub.co/(dashboard)/partners/network/page.tsx
+++ b/apps/web/app/(ee)/admin.dub.co/(dashboard)/partners/network/page.tsx
@@ -139,6 +139,7 @@ export default function NetworkApplicationsPage() {
     queryParams({
       del: ["networkStatus", "country", "page"],
       scroll: false,
+      shallow: true,
     });
   };
 
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/domains/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/domains/page-client.tsx
index c163889eeae..663cf4ac5e5 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/domains/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/domains/page-client.tsx
@@ -102,16 +102,7 @@ export function CustomDomains() {
       <div className="grid gap-5">
         <div className="flex flex-wrap justify-between gap-6">
           <div className="w-full sm:w-auto">
-            <SearchBoxPersisted
-              loading={loading}
-              onChangeDebounced={(t) => {
-                if (t) {
-                  queryParams({ set: { search: t }, del: "page" });
-                } else {
-                  queryParams({ del: "search" });
-                }
-              }}
-            />
+            <SearchBoxPersisted loading={loading} />
           </div>
           <div className="flex w-full flex-wrap items-center gap-3 sm:w-auto">
             <ToggleGroup
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/links/folders/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/links/folders/page-client.tsx
index 9880362fd8a..5f769551a2b 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/links/folders/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/links/folders/page-client.tsx
@@ -9,7 +9,7 @@ import { FolderCard } from "@/ui/folders/folder-card";
 import { FolderCardPlaceholder } from "@/ui/folders/folder-card-placeholder";
 import { useAddFolderModal } from "@/ui/modals/add-folder-modal";
 import { SearchBoxPersisted } from "@/ui/shared/search-box";
-import { PaginationControls, usePagination, useRouterStuff } from "@dub/ui";
+import { PaginationControls, usePagination } from "@dub/ui";
 import { useSearchParams } from "next/navigation";
 
 const allLinkFolder: Folder = {
@@ -21,7 +21,6 @@ const allLinkFolder: Folder = {
 
 export const FoldersPageClient = () => {
   const searchParams = useSearchParams();
-  const { queryParams } = useRouterStuff();
 
   const { folders, isValidating } = useFolders({
     includeParams: ["search", "page"],
@@ -44,16 +43,7 @@ export const FoldersPageClient = () => {
       <div className="grid gap-4">
         <div className="flex w-full flex-wrap items-center justify-between gap-3 sm:w-auto">
           <div className="w-full md:w-56 lg:w-64">
-            <SearchBoxPersisted
-              loading={isValidating}
-              onChangeDebounced={(t) => {
-                if (t) {
-                  queryParams({ set: { search: t }, del: "page" });
-                } else {
-                  queryParams({ del: "search" });
-                }
-              }}
-            />
+            <SearchBoxPersisted loading={isValidating} />
           </div>
         </div>
 
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/links/tags/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/links/tags/page-client.tsx
index e46148d3fd5..3b9336febac 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/links/tags/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/links/tags/page-client.tsx
@@ -26,7 +26,7 @@ export const TagsListContext = createContext<{
 });
 
 export default function WorkspaceTagsClient() {
-  const { searchParams, queryParams } = useRouterStuff();
+  const { searchParams } = useRouterStuff();
 
   const { AddEditTagModal, AddTagButton } = useAddEditTagModal();
 
@@ -50,16 +50,7 @@ export default function WorkspaceTagsClient() {
     <div className="grid grid-cols-1 gap-4 pb-10">
       <AddEditTagModal />
       <div className="flex w-full flex-wrap items-center justify-between gap-3 sm:w-auto">
-        <SearchBoxPersisted
-          loading={loading}
-          onChangeDebounced={(t) => {
-            if (t) {
-              queryParams({ set: { search: t }, del: "page" });
-            } else {
-              queryParams({ del: "search" });
-            }
-          }}
-        />
+        <SearchBoxPersisted loading={loading} />
       </div>
 
       {!loading && tags?.length === 0 ? (
diff --git a/apps/web/tests/ui/use-router-stuff.test.ts b/apps/web/tests/ui/use-router-stuff.test.ts
new file mode 100644
index 00000000000..5354b619f3d
--- /dev/null
+++ b/apps/web/tests/ui/use-router-stuff.test.ts
@@ -0,0 +1,114 @@
+// @vitest-environment happy-dom
+import { createElement } from "react";
+import { flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mock fns shared with the next/navigation mock factory (hoisted above imports).
+const mocks = vi.hoisted(() => ({
+  push: vi.fn(),
+  replace: vi.fn(),
+  searchParams: new URLSearchParams(),
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: mocks.push, replace: mocks.replace }),
+  usePathname: () => "/test",
+  useSearchParams: () => mocks.searchParams,
+}));
+
+// `useRouterStuff` imports `AppRouterInstance` (type only) from this module; mock
+// it defensively in case the transpiler emits a runtime import for it.
+vi.mock("next/dist/shared/lib/app-router-context.shared-runtime", () => ({}));
+
+// Import the hook directly from source (not the @dub/ui barrel) to keep the test
+// light and avoid pulling the whole UI library into the test environment.
+import { useRouterStuff } from "../../../../packages/ui/src/hooks/use-router-stuff";
+
+/** Render the hook once and return its API (no effects involved here). */
+function renderQueryParams() {
+  let api: ReturnType<typeof useRouterStuff> | undefined;
+  function Probe() {
+    api = useRouterStuff();
+    return null;
+  }
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  flushSync(() => createRoot(container).render(createElement(Probe)));
+  if (!api) throw new Error("hook did not render");
+  return api;
+}
+
+describe("useRouterStuff queryParams — shallow routing", () => {
+  let replaceState: ReturnType<typeof vi.spyOn>;
+  let pushState: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    mocks.push.mockClear();
+    mocks.replace.mockClear();
+    mocks.searchParams = new URLSearchParams();
+    replaceState = vi.spyOn(window.history, "replaceState");
+    pushState = vi.spyOn(window.history, "pushState");
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  // This is the invariant the search-perf fix depends on: a `shallow` write must
+  // update the URL via the History API and must NOT trigger a router navigation
+  // (which would re-render Server Components — a wasted RSC round-trip for our
+  // client-fetched, SWR-keyed tables). SearchBoxPersisted relies on this.
+  it("shallow + replace writes the URL via history.replaceState, never the router", () => {
+    const { queryParams } = renderQueryParams();
+
+    queryParams({
+      set: { search: "foo" },
+      del: "page",
+      shallow: true,
+      replace: true,
+    });
+
+    expect(replaceState).toHaveBeenCalledWith({}, "", "/test?search=foo");
+    expect(pushState).not.toHaveBeenCalled();
+    expect(mocks.replace).not.toHaveBeenCalled();
+    expect(mocks.push).not.toHaveBeenCalled();
+  });
+
+  it("shallow without replace uses history.pushState (mirrors router.push)", () => {
+    const { queryParams } = renderQueryParams();
+
+    queryParams({ set: { search: "foo" }, shallow: true });
+
+    expect(pushState).toHaveBeenCalledWith({}, "", "/test?search=foo");
+    expect(mocks.push).not.toHaveBeenCalled();
+    expect(mocks.replace).not.toHaveBeenCalled();
+  });
+
+  it("non-shallow falls back to a router navigation (the RSC round-trip we avoid for search)", () => {
+    const { queryParams } = renderQueryParams();
+
+    queryParams({ set: { search: "foo" } });
+
+    expect(mocks.push).toHaveBeenCalledWith("/test?search=foo", {
+      scroll: false,
+    });
+    expect(replaceState).not.toHaveBeenCalled();
+    expect(pushState).not.toHaveBeenCalled();
+  });
+
+  it("no-ops when the resulting URL is unchanged (no router nav, no history write)", () => {
+    mocks.searchParams = new URLSearchParams("search=foo");
+    const { queryParams } = renderQueryParams();
+
+    // `del` a param that isn't present → identical URL. This is the pagination
+    // case: after a search clears `page`, a pagination sync re-issues del:page,
+    // which must not fire a (same-URL) navigation / RSC round-trip.
+    queryParams({ del: "page" });
+
+    expect(mocks.push).not.toHaveBeenCalled();
+    expect(mocks.replace).not.toHaveBeenCalled();
+    expect(replaceState).not.toHaveBeenCalled();
+    expect(pushState).not.toHaveBeenCalled();
+  });
+});
diff --git a/apps/web/ui/shared/search-box.tsx b/apps/web/ui/shared/search-box.tsx
index 572cfb059e9..c640166d15f 100644
--- a/apps/web/ui/shared/search-box.tsx
+++ b/apps/web/ui/shared/search-box.tsx
@@ -117,12 +117,12 @@ export const SearchBox = forwardRef(
   },
 );
 
+// For client-rendered search views only. Updates the URL shallowly so useSearchParams-driven data fetching can run without RSC round-trip
 export function SearchBoxPersisted({
   urlParam = "search",
   onChange,
-  onChangeDebounced,
   ...props
-}: { urlParam?: string } & Partial<SearchBoxProps>) {
+}: { urlParam?: string } & Partial<Omit<SearchBoxProps, "onChangeDebounced">>) {
   const { queryParams, searchParams } = useRouterStuff();
 
   const [value, setValue] = useState(searchParams.get(urlParam) ?? "");
@@ -130,11 +130,11 @@ export function SearchBoxPersisted({
 
   // Set URL param when debounced value changes
   useEffect(() => {
-    if (searchParams.get(urlParam) ?? "" !== debouncedValue)
+    if ((searchParams.get(urlParam) ?? "") !== debouncedValue)
       queryParams(
         debouncedValue === ""
-          ? { del: [urlParam, "page"] }
-          : { set: { [urlParam]: debouncedValue }, del: "page" },
+          ? { del: [urlParam, "page"], shallow: true }
+          : { set: { [urlParam]: debouncedValue }, del: "page", shallow: true },
       );
   }, [debouncedValue]);
 
@@ -142,8 +142,11 @@ export function SearchBoxPersisted({
   useEffect(() => {
     const search = searchParams.get(urlParam);
     // Only update if the value and debouncedValue are synced (the user isn't actively typing)
-    if ((search ?? "" !== value) && value === debouncedValue)
+    if ((search ?? "") !== value && value === debouncedValue) {
+      // Sync browser back/forward URL changes without overwriting in-progress edits.
       setValue(search ?? "");
+      setDebouncedValue(search ?? "");
+    }
   }, [searchParams.get(urlParam)]);
 
   return (
@@ -153,10 +156,7 @@ export function SearchBoxPersisted({
         setValue(value);
         onChange?.(value);
       }}
-      onChangeDebounced={(value) => {
-        setDebouncedValue(value);
-        onChangeDebounced?.(value);
-      }}
+      onChangeDebounced={setDebouncedValue}
       {...props}
     />
   );
diff --git a/packages/ui/src/hooks/use-router-stuff.ts b/packages/ui/src/hooks/use-router-stuff.ts
index aa5d44c5c73..fba733938c6 100644
--- a/packages/ui/src/hooks/use-router-stuff.ts
+++ b/packages/ui/src/hooks/use-router-stuff.ts
@@ -57,6 +57,7 @@ export function useRouterStuff() {
       set,
       del,
       replace,
+      shallow,
       scroll = false,
       getNewPath,
       arrayDelimiter = ",",
@@ -64,6 +65,7 @@ export function useRouterStuff() {
       set?: Record<string, string | string[]>;
       del?: string | string[];
       replace?: boolean;
+      shallow?: boolean;
       scroll?: boolean;
       getNewPath?: boolean;
       arrayDelimiter?: string;
@@ -87,6 +89,26 @@ export function useRouterStuff() {
       }`;
       if (getNewPath) return newPath;
 
+      // Avoid no-op navigations, which can still trigger RSC work.
+      const currentQuery = searchParams.toString();
+      const currentPath = `${pathname}${
+        currentQuery.length > 0 ? `?${currentQuery}` : ""
+      }`;
+      if (newPath === currentPath) return;
+
+      // Client-owned params can update without triggering a new RSC round-trip.
+      if (shallow) {
+        // guard for SSR safety; mirror router.push/replace semantics.
+        if (typeof window !== "undefined") {
+          if (replace) {
+            window.history.replaceState({}, "", newPath);
+          } else {
+            window.history.pushState({}, "", newPath);
+          }
+        }
+        return;
+      }
+
       // Nested overflow container scroll is not preserved by Next's `scroll: false` (window-only).
       if (scroll === false && typeof document !== "undefined") {
         const el = document.getElementById(DUB_DASHBOARD_MAIN_SCROLL_ID);