Issues with v7_startTransition and triggering useEffect from current location

[joshkel]

I'm using React Router as a...

library

Reproduction

https://stackblitz.com/edit/react-router-timing-om2qkn6g?file=src%2FApp.tsx

1. Click "Enable slowdown."
2. Experiment with clicking on the various numbered links.
3. Note that, sometimes, the resulting link is /n-1/b instead of /n or /n/b - in other words, the redirect takes effect from a previous browser location instead of the current browser location, and the user's manual navigation is lost.

System Info

System:
    OS: macOS 15.1.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 151.58 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.5 - ~/.nvm/versions/node/v18.20.5/bin/node
    Yarn: 4.5.3 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v18.20.5/bin/npm
    bun: 1.1.26 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 131.0.6778.140
    Edge: 131.0.2903.99
    Safari: 18.1.1
    Safari Technology Preview: 18.2

Used Package Manager

yarn

Expected Behavior

Using useEffect to trigger a navigation operation based off of the current location works as expected.

Actual Behavior

Because useLocation is updated asynchronously, by a React transition, it may lag behind the actual browser location.

[timdorr]

You're using the wrong dependency in your last useEffect. If you change it to depend on location.pathname, the problem goes away.

[joshkel]

Thanks for the reply, @timdorr, but I am still able to reliably trigger the bug using the test case I gave, even if I change the effect to depend on location.pathname. (Since this is a race condition, it's not every time, but it's often enough.)

The problem is that, because of transitions, location and location.pathname may lag behind the user's own actions to manipulate the browser location - so, unless I'm missing something, there's no way to ensure that application actions based on location overwrite the user's navigation.

[timdorr]

Then I would wrap any relevant code in your own startTransition to allow React to batch things and align the render of your component.

[joshkel]

Thanks for the suggestion, @timdorr. I had already tried using startTransition, but it doesn't seem to help.

If I understand correctly, a React transition would fix the problem of React state not being in sync with useLocation. But my problem isn't that useLocation isn't in sync with other React state; it's that using useLocation for browser navigation may fail because useLocation isn't in sync with the browser's actual navigation.

[nihgwu]

@joshkel did you manage to find a solution, I think I ran into the same issue, window.location.pathname !== useLocation().pathname

[joshkel]

@nihgwu I did not. For now, we're using React Router v6 with v7_startTransition: false. Unfortunately, in between this and #12552, I'm not sure that React Router v7 is a good fit for our project.

[KurtGokhan]

Opened a feature request for this #12855

[eliasrmz01]

In case it helps people landing here with the same issues.
In our app, we went for the following "solution". Create our own wrapper.
Not ideal, but good enough to make future updates of the lib easy to maintain.

I do believe making the startTransition optional and configurable is trivial and should be supported by the lib. It will help big mature projects backwards compatibility.

/* eslint-disable react/no-children-prop */
import { useCallback, useLayoutEffect, useRef, useState } from 'react';
import { BrowserRouter, BrowserRouterProps, NavigationType, Router, UNSAFE_createBrowserHistory } from 'react-router';

/**
 * Custom implementation of a BrowserRouter from react-router package.
 * Its a copy of the original react router but without startTransition. In our project URL updates are critical updates.
 * Components and deep links support expect URL to be up to date at all times. This was the original behaviour of the react router.
 *
 * ref: https://github.com/remix-run/react-router/blob/71b4eef6b4f58c8600deb50d5db12af6679235a1/packages/react-router/lib/dom/lib.tsx#L256
 *
 * For now, we dont support startTransition. We can try in following versions by restoring *startTransition(() => setStateImpl(newState));*
 * or just use the original version of BrowserRouter.
 */
export const CustomBrowserRouter: typeof BrowserRouter = ({ basename, children, window }: BrowserRouterProps) => {
  let historyRef = useRef<ReturnType<typeof UNSAFE_createBrowserHistory>>();
  if (historyRef.current == null) {
    historyRef.current = UNSAFE_createBrowserHistory({ window, v5Compat: true });
  }

  let history = historyRef.current;
  let [state, setStateImpl] = useState({
    action: history.action,
    location: history.location,
  });
  let setState = useCallback(
    (newState: { action: NavigationType; location: ReturnType<typeof UNSAFE_createBrowserHistory>['location'] }) => {
      setStateImpl(newState);
    },
    [setStateImpl],
  );

  useLayoutEffect(() => history.listen(setState), [history, setState]);

  return (
    <Router
      basename={basename}
      children={children}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};

export default CustomBrowserRouter;

On top of this we also added a linter rule to make sure no one uses the BrowserRouter directly from the lib.
Hope it helps!

[KurtGokhan]

Note that the workaround posted by @eliasrmz01 isn't applicable to the data router.