Modification of useCurrentMatches() result triggers full re-render

[grobitto]

Describe the bug

Just had a very nasty bug which cost me a solid few hours to realise what is wrong.

I used useCurrentMatches() to get some routes metadata, but I needed deepest route data, so I used reverse() + find(), like this:

  createEffect(() => {
    const matches = useCurrentMatches();
    // should we show menu?
    const showMenu = matches().reverse().find((match) => match.route.info?.menu !== undefined);
    setVisible(showMenu ? showMenu.route.info?.menu : true);
  });

Everything was working fine, except I got full re-render of every page now. After a few hours of debugging and head-scratching I realised that the problem was that reverse() modified internal array and it messed up router state.

Your Example Website or App

see example above

Steps to Reproduce the Bug or Issue

1. use useCurrentMatches();
2. modify result array
3. every page re-renders

Expected behavior

I think the best way is to make a copy of internal array and return it with useCurrentMatches() so it will not affect router internals. If it is not possible due to performance etc - this should be documented with a warning: do not modify result of this function call.

Screenshots or Videos

No response

Platform

• OS: windows
• Browser: chrome
• Version: 0.15.3

Additional context

No response