useSearchParams API

[blackmann]

The docs for setSearchParams states that it can be called with a function that accepts the previous search params and kinda acts like setState¹.

So my expectation was that, if I returned the previous search params, the page wouldn't reload. But I was taken by surprise: the page reloaded — which is contrary to how setState behaves when you return the previous/old value. I'm not sure how this affects an SPA/react router app, but in a remix app, this causes double page loads.

Here's my usage:

React.useEffect(() => {
	const timeout = setTimeout(() => {
		setSearchParams((prev) => {
			const current = { start: $start, end: $end, q: $q };
			const prevObj = Object.fromEntries(prev);
			const changed = JSON.stringify(current) !== JSON.stringify(prevObj);

			if (!changed) return prev;

			return current;
		});
	}, 500);

	return () => clearTimeout(timeout);
}, [setSearchParams, $start, $end, $q]);

I thought it was an oversight but an example from the docs did prev.set('key', value) and returned prev.

Looking at the source code for useSearchParams, in an attempt to push a "fix", the last change was 2 years ago and I've seen no reports on the useSearchParams API — which is surprising. Maybe because people haven't noticed or are fine with its design. So I resorted to duplicating the code in my project to insert a check on prev before making a refresh.

My ask is, what do you think about not navigating to the new params when we return the previous one — which mimics how setState actually works.

Footnotes

1. https://reactrouter.com/en/main/hooks/use-search-params "Just as React's useState, setSearchParams also supports functional updates..." ↩

[kiliman]

setSearchParams updates the URL, which triggers navigation even if the resulting URL has not been changed. It's like calling navigate() on the same URL, which will also reload the page.

https://stackblitz.com/edit/remix-run-remix-m9ldmb?file=app%2Froutes%2F_index.tsx

[blackmann]

Yes I understand/know that...

But this has the effect of causing a navigation (to the same page) on page load in remix apps. (See code snippet in OP).

My point is, if you returned the same [URLSearchParam] object from the functional update, it shouldn't cause a refresh (or technically shouldn't navigate()). When I say the same object, I mean doing an === on it should be true.

...which is how setState behaves in regards to re-renders

To repeat, I'm talking about how functional updates work.