Is there a way to subscribe to a subset of the query params state?

[Thiago-cpu]

I have something like this but with more complex components.

function SearchInput(){
 const [params, setParams] = useQueryStates({
    q: parseAsString
      .withOptions({
        clearOnDefault: true,
      })
      .withDefault(""),
  });
  
  return <input value={params.q} onChange={e => setParams({q: e.target.value}) />
}

function NextPage(){
 const [params, setParams] = useQueryStates({
    page: parseAsInteger
      .withOptions({
        clearOnDefault: true,
      })
      .withDefault(1),
  });
  
  return <button onClick={e => setParams(p => ({page: p.page + 1}))>Next</button>
}

Currently when I click the button is rerendering SearchInput component. Is there some way to fix this without using memo ?

[franky47]

Unfortunately no, in Next.js the useSearchParams hook re-renders for any change in the search params.