Suggestion: useSearchParamState

[iamnafets]

Sometimes it's useful to use the search params to store state. We currently have something like this:

    const [query, setQuery] = useSearchParamState('query', z.string(), "defaultQuery");

Where setQuery actually changes the search params and updates the state. I'd love to incorporate this into the library. Any interest?

Thinking this look like:

export const { routes, useSafeParams, useSearchParamsState } = createNavigationConfig(
   // ...
)

const [{ query, page }, setSearchParams] = useSearchParamsState('search');

[lukemorales]

Thanks for another great suggestion @iamnafets!

Could you elaborate a bit more over how would this be different/better than using:

export const { routes, useSafeParams, useSearchParamsState } = createNavigationConfig(defineRoute => ({
   search: defineRoute('/search', { search: z.object({ query: z.string(), page: z.coerce.number() })  })
}));

// Search Page

export default function SeachPage() {
  // ...
  return (
    <Pagination>
      <Link href={routes.search({ search: { query, page: page + 1 } })}>Next page</Link>
    </Pagination>
  )
}

[iamnafets]

For SPAs, you often want to manipulate the querystring without navigating. React's Dispatch<SetActionState<T>> takes a lambda which passes the current value allowing you to do something like setSearchParams(old => ({ ...old, page: old.page +1 })) instead of re-assembling the whole object for if your queryString becomes large.

[lukemorales]

For SPAs, you often want to manipulate the querystring without navigating.

How come? I mean, what's the point of storing state in the URL if you're not navigating?