Skip to content

updateMatch 10s of times on navigation, causing slowdowns #4359

@hadar759

Description

@hadar759

Which project does this relate to?

Router

Describe the bug

On navigation loadMatches runs twice, and inside it updateMatch runs 3 times for each route in the hierarchy of the navigated one. This causes updateMatch to run >50 times on a typical navigation in my app, slowing things down - especially when updateMatch itself is slow in some cases (for reasons unknown to me).

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-updatematch

Steps to Reproduce the Bug or Issue

This is a reproduction of the route hierarchy in my app.
I couldn't get the manual setup stages to persist upon refresh, so the following needs to be ran:

  1. Let dev servers load
  2. Run pnpm patch @tanstack/router-core --edit-dir 'pnpm-patches'
  3. Edit pnpm-patches/dist/esm/router.js - add console.log('updateMatch', id); after line 791
  4. Run pnpm patch-commit pnpm-patches. The console will complain that no changes were found, ignore it.
  5. Run pnpm install && pnpm run dev
  6. Click on links and navigation buttons, and see lots of updateMatch for each one in the console

Expected behavior

I expected updateMatch to run a lot less, and when it does to not take more than 1-2ms, it causes my app to completely freeze sometimes.

Screenshots or Videos

Video + screenshots from a Chrome devtools Performance tab recording, where calling navigate froze my app for 5 seconds on updateMatches which took 50ms-200ms each

updateMatch.mov
Image

Platform

  • OS: macOS Sequoia 15.5 (24F74)
  • Browser: Arc browser Version 1.97.1 (63934), Chromium Engine Version 137.0.7151.69

Additional context

I'd be happy to provide more information as needed.
Besides the issue of updateMatch executing so many times, I couldn't understand why sometimes it takes very long - especially since that's the only thing running according to the Performance tab.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions