Possible race condition with `usePath`

Hello!

While working on a project @ my day job I came across what looks to be a race condition with usePath and navigate.

I’ve created a code sandbox that reliably replicates the issue: https://codesandbox.io/s/ecstatic-silence-16zr4

Steps to reproduce

1. Navigate to /about.
2. Reload the page so that we ‘start’ on /about.
3. Open up your browser console so you can see the logs.
4. Press 1 on the keyboard.

What should happen: Navigates to home page, one console log from Home saying home path: / What actually happens: Navigates to home page, but we get two console logs. One from the /about component, and one from the / root component.

From what I can gather, using navigate seems to update the value returned by usePath before the navigation is complete - thus giving components we are navigating away from the chance to run code based off the changed path value. For example, in a useEffect:

  useEffect(() => {
    setTabUrl(path);
  }, [path, setTabUrl]);

[yenoiwesa]

@kyeotic I just performed a test with the beta version and that fixed the (specific) issue we were facing without any change in our code base! 🥳

I’ll send a pull request for the library upgrade and we will dog food it for a while to make sure there are no routing regressions. We’ll let you know!

Thanks again!

[kyeotic]

@fpyir

I’ve released a beta under 1.4.6-0. Install with

npm i raviger@1.4.6-0
# or
npm i raviger@beta

This reworks the internals of useRoutes so that it tracks the path differently. Unit testing shows that code in useEffect hooks do not receive the wrong path. Im releasing this as a beta because none of the apps I manage have encountered this bug and I am unsure of the total impact of this change.

I will leave it as a beta for two weeks, or until you confirm it fixes your issue without introducing any other bugs. Whichever comes first.