How to prevent race condition of different navigates?

[lzl124631x]

I have some states derived from the URL and different navigate in different callbacks. For example:

const App = ({location}) => {
  const { foo, bar } = parseUrl(location.pathname);
  function onFooChange(newFoo) {
      navigate(getUrl({ foo: newFoo, bar });
  }
  function onBarChange(newBar) {
     navigate(getUrl({ foo, bar: newBar });
  }
}

The issue is that if we invoke the onFooChange and then invoke onBarChange right away, the onBarChange is still using the OLD foo value which overwrites the new foo value.

// initially at /foo0/bar0
onFooChange("foo1"); // /foo1/bar0
onBarChange("bar1"); // /foo0/bar1. But the expected is /foo1/bar1

How should I work around this? Thanks!

---

some additional thoughts:

We wanted to use the URL as the source of truth. So we didn't want to create local states of foo and bar locally which might cause conflict between the states in URL and the local state.

Is there something like the setState callback so that I can leverage the previous state and add incremental changes to it instead of directly overwriting it?

Or I should use the promise returned by the navigate? Then I need to maintain a list of promises myself which I tend not to do.

[lzl124631x]

ping

[czabaj]

Well, navigate returns a promise and the history object has a transitioning getter, some of this API might help you handle the race conditions.

Use the Source Luke 😉

router/src/lib/history.js

Line 39 in e203fe6

let createHistory = (source, options) => {