Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Possible race condition with `usePath`

See original GitHub issue


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:

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(() => {
  }, [path, setTabUrl]);

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:14 (12 by maintainers)

github_iconTop GitHub Comments

yenoiwesacommented, Sep 8, 2020

@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!

kyeoticcommented, Sep 7, 2020


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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Race condition when fetching request.url in Node / Express
Fixed this by making the request object available to my templates in a middleware function (beforehand I set it as a global on...
Read more >
File Path Race Condition & How To Prevent It - bin 0x31
In this video we look at a typical race condition involving file paths. We learn about the renameat syscall to exploit it and...
Read more >
Kubernetes dataclient race condition · Issue #304 · zalando/skipper ...
I am testing skipper with k8s and I am having weird behaviour with some requests that are ending arbitrarily in different endpoints.
Read more >
Looking for a performant way to prevent a race condition.
Is there any cleaner way to prevent the race condition? Or is there a better way to use the locking mechanism? Any help...
Read more >
Race conditions in React and beyond. A race condition guard ...
Therefore, they are racing to access it. Our code does not need to utilize multiple threads to have a race condition. A similar...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found