How to change URL query parameters without rerendering client component?

[arepp23]

Related to this issue which was never solved.

I have a search box which updates the ?query= query param when a user types a value. The goal is to have the table on the page update based on the query given.

'use client';

import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useDebouncedCallback } from 'use-debounce';

export default function Search({ placeholder }: { placeholder: string }) {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const { replace } = useRouter();

  const handleSearch = useDebouncedCallback((term) => {
    const params = new URLSearchParams(searchParams);
    if (term) {
      params.set('query', term);
    } else {
      params.delete('query');
    }
    replace(`${pathname}?${params.toString()}`);
  }, 300);

  return (
    <div className="relative flex flex-1 flex-shrink-0">
      <label htmlFor="search" className="sr-only">
        Search
      </label>
      <input
        className="peer block w-96 rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
        placeholder={placeholder}
        onChange={(e) => {
          handleSearch(e.target.value);
        }}
        defaultValue={searchParams.get('query')?.toString()}
      />
      <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
    </div>
  );
}

This works fine when it's used inside of a server component, as changing the query params doesn't cause a full rerender of the server component. However, when used inside a client component, the whole client component rerenders when the search box is updated, which is not desirable behavior. Is there a way around this?

[skarensmoll]

Did you find a workaround? @arepp23

[SamjiDiamond]

Use this instead

  // create an updated router path object
  const newPathObject = {
    pathname: router.pathname,
    query: params
  }

  // update the URL, without re-triggering data fetching
  router.push(newPathObject, undefined, { shallow: true });