[Bug]: Make setSearchParams stable?

[kentcdodds]

What version of React Router are you using?

6.7.0

Steps to Reproduce

1. Use setSearchParams in anything that needs a dependency array and add it to avoid issues.
2. Notice that the presence of setSearchParams in the dependency array triggers the useEffect any time the searchParams change (for example) to run again

Expected Behavior

I expect to be able to use setSearchParams in a useEffect and not have that useEffect re-run just because search params changed.

Actual Behavior

This is happening because setSearchParams allows you to pass a function callback which receives the current searchParams so setSearchParams changes whenever the searchParams change. This is a nice API, but leads to unexpected re-runs of things using setSearchParams.

An alternative is to use a ref to keep track of the latest searchParams and pass that ref.current instead so searchParams doesn't need to be listed in the nextInit call. I can't think of a scenario where this would break anything.

The code I'm talking about is here:

react-router/packages/react-router-dom/index.tsx

Lines 872 to 881 in 0ce0e4c

	let setSearchParams = React.useCallback<SetURLSearchParams>(
	(nextInit, navigateOptions) => {
	const newSearchParams = createSearchParams(
	typeof nextInit === "function" ? nextInit(searchParams) : nextInit
	);
	hasSetSearchParamsRef.current = true;
	navigate("?" + newSearchParams, navigateOptions);
	},
	[navigate, searchParams]
	);

[timdorr]

Some historical context on this:

#9304
#9912
#8908 / #9851

[max-pcentra]

Also, calling setSearchParams will re-render the whole route. It would be very helpful if at least there would be some sort of flag on each route config, similar to shouldRevalidate, that let's you opt out of such re-renders.

[zhengjitf]

I feel that all functions in hooks, especially those we’ll call in other hooks or as props to a component, are supposed to be stable. we just need to be able to get the latest states when these functions are called.

The following is a simple solution to create stable functions:

/* in a hook */

const fn = { /*... */ }

const fnRef = useRef(fn)
fnRef.current = fn
const stableFn = useCallback((...args) => fnRef.current(...args), [])

// then, we can use stableFn

[github-actions]

This issue has been automatically marked stale because we haven't received a response from the original author in a while 🙈. This automation helps keep the issue tracker clean from issues that are not actionable. Please reach out if you have more information for us or you think this issue shouldn't be closed! 🙂 If you don't do so within 7 days, this issue will be automatically closed.

[dennisameling]

Please don't close, I literally ran into this issue today 🙏🏼

[jamesa3]

We are still affected by this bug. This issue should not be closed until a fix is published.

[KostiantynO]

I use useCallback and it works!

const updateSearchParams = useCallback(setSearchParams, []); 

Please kindly consider to make updateFunction a stable reference :)

[maastrich]

Also, if multiple updates happen in the same render cycle, using the new value as a dependency of the callback causes it to no be provided within the prev param of the n+1 setSearchParams call

[lucabergamini]

This is what I'm currently using as a workaround (following @zhengjitf stable function suggestion):

import { useCallback, useEffect, useRef } from "react";
import { useSearchParams as useSearchParamsOrig } from "react-router-dom";

export function useSearchParams() {
  const [searchParams, setSearchParams] = useSearchParamsOrig();
  // Store a reference to the setter
  const setSearchParamsRef = useRef(setSearchParams);
  // Update the reference when the setter changes
  useEffect(() => {
    setSearchParamsRef.current = setSearchParams;
  }, [setSearchParams]);
  // Return a stable setter (which has no dep on searchParams)
  const setSearchParamsStable = useCallback(
    (...args: Parameters<typeof setSearchParams>) =>
      setSearchParamsRef.current(...args),
    []
  );
  return { searchParams, setSearchParams: setSearchParamsStable };
}

in case anybody is looking for the same workaround. It works for my use case, but I've not tested corner cases.

[maastrich]

@lucabergamini useEffect is no good, it would be best at the root off the component as the ref would be instantly updated instead of waiting for the render cycle to end in order to run the effects.

[lucabergamini]

Do you mean a setSearchParamsRef.current=setSearchParams in the body of the hook to replace the useEffect @maastrich?

[maastrich]

@lucabergamini yes

[rwilliams3088]

I ran into this same issue today - and since it was causing React rendering errors in the console, I decided to go ahead and put together a fix: #10740

[finnhvman]

I ran into this same issue today - and since it was causing React rendering errors in the console, I decided to go ahead and put together a fix: #10740

Thank you! Hope to see this merged soon!

I ran into the issue today, absolutely unexpected and seems very dangerous.

[tengl]

What is the progress on this? Will the fix be merged?

[helguita]

I ran into this same issue today as well.

[kambing86]

it seems like a big foot gun, I noticed a bug in my app when calling setSearchParams one after another even I'm using the callback, hoping that it will work the same as setState in useState

[finnhvman]

any update? or does anyone know of an alternative to react-router which has a stable solution?

[flo5324]

I encountered the same problem recently, I always assumed that the setter was stable
I have tested the fix by @rwilliams3088 #10740 and it seems to work like a charm
Hope the PR will be reviewed as soon as possible

[holaChaitanya]

Guys, do you have any update on the issue? Had to disable the exhaustive deps check to ship the code!

[KurtGokhan]

Currently I see two issues with setSearchParams.

• It is not stable
• It doesn't pass the latest value in its callback function (see @maastrich's comment). This can be worked-around with flushSync but that is a waste of renders.

Setters are usually imperative, not reactive. That is why React's useState is a stable function and it allows us to pass a callback to ensure we are working with the latest data.