react-router as library for SPA. Detached Elements are created when navigating

[cheng500]

I'm using React Router as a...

library

Reproduction

https://stackblitz.com/edit/react-router-v7-detached-elements

• Open Memory Tab in Browser Developer Tools
• Navigate to "About" page
• Click on "Click me" button
• Navigate back to "Home" page
• Create a "Detached Element" profile
• Button is detached
• Trigger garbage collection by clicking the "Bin" icon
• Button remains detached
• Repeat for multiple detached buttons

Info: React Developer Tools extension also causes similar behavior. Remove extension or test using incognito to disable extensions

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (2) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    react-router: 7.1.1 => 7.1.1

Used Package Manager

npm

Expected Behavior

Button (and other elements) should be removed when garbage collection is triggered

Actual Behavior

Button (and other elements) remains in memory

[pawelblaszczyk5]

Afaik it has something to do with Chrome itself - facebook/react#31929
TanStack/router#3056
#12629

[timdorr]

Correct, this isn't a bug with the library itself.