Skip to content

Default <Link /> behaviour (discover="render") causes performance issues in large lists #14075

@richardscarrott

Description

@richardscarrott

Reproduction

https://stackblitz.com/edit/github-xjqtafn4-nkhw9euc?file=app%2Froutes%2Fhome.tsx

System Info

System:
    OS: macOS 15.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 204.08 MB / 32.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 20.19.2 - ~/.nvm/versions/node/v20.19.2/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.19.2/bin/npm
    pnpm: 10.11.0 - /opt/homebrew/bin/pnpm
    Watchman: 2025.05.26.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 138.0.7204.169
    Edge: 138.0.3351.55
    Safari: 18.5
  npmPackages:
    @react-router/dev: ^7.7.0 => 7.7.0
    @react-router/node: ^7.7.0 => 7.7.0
    @react-router/serve: ^7.7.0 => 7.7.0
    react-router: ^7.7.0 => 7.7.0
    vite: ^6.3.3 => 6.3.5

Used Package Manager

npm

Expected Behavior

When rendering a large list (e.g. 1000+ items), each with a <Link /> pointing to a unique path, I expected performance during both initial and subsequent renders to be comparable to rendering plain elements (e.g. <span>) instead of links.

Actual Behavior

Rendering a large list where each <Link /> points to a unique path results in noticeable slowness during both initial and subsequent renders. Profiling suggests that the default discover="render" behaviour introduces non-trivial overhead per link. Switching to discover="none" significantly improves performance.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions