RR6 wrapUseRoutes creates a new component on every render

[jameshoward]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

7.68.0

Framework Version

React 18.2.0

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

When using wrapUseRoutes we noticed that route components were being unmounted and remounted if the component where useRoutes is called was re-rendered. After some digging we realised it is because each time the wrapped useRoutes function is called, a new SentryRoutes component will be created (i.e. a totally new function component, not a re-rendering of the component) - https://github.com/getsentry/sentry-javascript/blob/develop/packages/react/src/reactrouterv6.tsx#L231

1. Set up a React project using React Router v6 and Sentry, using wrapUseRoutes
2. In the component that renders the element returned from useRoutes, add a useState and a button to trigger setting the state, which will force the component to re-render.
3. Add a useEffect with no dependencies in a route component to log when it mounts / un-mounts.
4. Cause the outer component to re-render and notice that the route component un-mounts and re-mounts.
5. Remove the use of wrapUseRoutes and repeat, noting that the route component remains mounted.

Expected Result

Routes behave the same whether using React Router's useRoutes or one wrapped using wrapUseRoutes.

Actual Result

Route components un-mount and re-mount each time the component containing the call to useRoutes re-renders.

[AbhiPrasad]

Hey @jameshoward - that is something we should improve. Backlogging for now, but PRs are welcome!

[AbhiPrasad]

@onurtemizkan if you get some bandwidth, feel free to take a look.

[AbhiPrasad]

@jameshoward we made some improvements to this in https://github.com/getsentry/sentry-javascript/releases/tag/7.69.0, please give it a try - feedback is welcome!

[jameshoward]

Sorry for the slow reply but yes, upgrading the library has fixed the issue. Thanks for sorting it so quickly. 👍