[v6] useNavigate triggers useEffect

[sebastian-ludwig]

I am currently porting from v5 to v6 and found out, that useNavigate() is calling useEffect, when used as a dependency (in contrast to useHistory() before):

const navigate = useNavigate();
useEffect(()=> {
  // should only run on someState-change
}, [navigate, someState])

You can find a Code sample here: https://codesandbox.io/s/eloquent-rosalind-wi2ch

I guess this is because of the relative navigation, right?
When I omit the navigate in the dependencies and navigate to an absolute path, I guess it would still work?
Have you got other solutions to avoid those not wanted calls?

[gnapse]

We've run into this problem in our team too. It'd be nice to have a navigate-like function that does not change when the location changes.

[quolpr]

I use this snippet:

export const useNavigateRef = () => {
  const navigate = useNavigate();
  const navRef = useRef<NavigateFunction>(navigate);

  useEffect(() => {
    navRef.current = navigate;
  }, [navigate]);

  return navRef;
};

[gnapse]

Oh yeah, the good old trick. I wonder why it is not the default that React do this for us for all callbacks.

Anyway, thanks. Indeed, it's a good workaround.

[quolpr]

Here is the issue #7634 :)

[ryanflorence]

FYI: With 6.4, redirecting in loaders/actions is usually preferred over useNavigate