adding useFetcher will render the next soft loading page twice

[devnomic]

I'm using React Router as a...

framework

Reproduction

On index page:
With useFectherin the page. Click the hello link.

// index.tsx
export default function Index() {
  const fetcher = useFetcher();

  return (
    <div>
      <Link to="/hello">Go to hello</Link>
    </div>
  );
}

console count 2. while it should be only 1.

// hello.tsx
export default function Hello() {
  console.count("render hello");
  return <div>Hello!</div>;
}

System Info

System:
    OS: macOS 15.3
    CPU: (14) arm64 Apple M3 Max
    Memory: 1.38 GB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v20.15.0/bin/npm
    pnpm: 8.11.0 - /opt/homebrew/bin/pnpm
    bun: 1.1.1 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 131.1.73.104
    Chrome: 133.0.6943.127
    Safari: 18.3
  npmPackages:
    @react-router/dev: 7.2.0 => 7.2.0 
    @react-router/fs-routes: 7.2.0 => 7.2.0 
    @react-router/node: 7.2.0 => 7.2.0 
    @react-router/serve: 7.2.0 => 7.2.0 
    react-router: 7.2.0 => 7.2.0 
    vite: ^5.4.14 => 5.4.14

Used Package Manager

npm

Expected Behavior

should render once.

Actual Behavior

render twice.

[timdorr]

This is expected behavior. The fetcher also provides router state information, so it has to render each time that changes. There is the pending and idle states when changing routes, so it will always render twice.