How to prevent Auth0 HOC from forcing react-router to re-render?

Original Source: How to use react router with Iframe without re-rendering : reactjs (reddit.com)

We have an iframe which we want to display for a specific route. When switching routes back and forth , the iframe is re-rendered and scroll position reset. For example, when user enter text into a form, navigating away to another route then back clears the content and rest the scroll position to the top.

We tracked down the problematic behavior to Auth0 authentication library’s HOC. As soon as we wrapped react-router with this higher order component, switching between routes seemed to force re-rendering.

A working minimal example without HOC can be found here: React Router DOM - JSFiddle - Code Playground

Our actual code is attached below:

  • If line 21-28, 33, 37 is enabled, line 32 is commented out, force re-rendering happens
  • If line 21-28, 33, 37 is commented out, line 32 is enabled, force re-rendering problem goes away

3 Likes

I’m noticing this about our apps as well. It’s triggering our global app context to re-render with every change in route. It’s not remounting at least, but still interesting that it’s triggering the re-render. Memoization didn’t help, despite passing in a custom compareProps function. We use this across multiple apps so I could foresee this causing a problem eventually

for us, we were using react router dom v6 and the useNavigate hook instead of the old useHistory hook. useNavigate changes with url changes, so that was triggering our onRedirectCallback function to re-render and thus causing the Auth0Context to update and cause whole app to re-render. However, the way you have it above is actually the proper way (not using the useNavigate hook). Hope you found something to fix it!

We are seeing the same issue on our end. Did you find a workaround?