Parent CompatRoute with nested v6 Routes and Route re-renders when a child route changes in PROD

[josuebill]

This is what my current migration looks like (in summary). It works great in development mode. We're using a custom configuration of webpack and we added Nx later on for monorepo management. I thought the migration was going great. It's even faster than it was before! However, I realized that it behaves differently when I start the app in PROD mode. I noticed this when I deployed my changes to a test environment built for prod. I was able to recreate the behavior locally starting my app with NODE_ENV=production

const Myv6Component = () => (
  // None of the child routes or components here use v5 hooks. Everything is imported from react-router-dom-v5-compat. 
  <>
    {/* MyComponent fetches a table but when I navigate to
     an individual item, the table re-renders (therefore refetches the data) */}
    <MyComponent />
    <Routes>
      <Route path='create/selector' element={<SelectorModal />}>
        <Route path='green' element={<CreateGreenThingPage />} />
        <Route path='blue' element={<CreateBlueThingPage />} />
      </Route>
      <Route path=':id'>
        <Route path='details' element={<DetailsDrawer />} />
        <Route path='edit' element={<EditFullScreenView />} />
      </Route>
    </Routes>
  </>
)

const App = () => {
  const location = useLocation() // v5 useLocation()
  return (
    <Router history={history}>
      <CompatRouter>
        <Switch>
          {/* Don't really know what this is doing but it fixes some
          re-renders according to the comment left by another engineer */}
          <Redirect from='/:url*(/+)' to={{ ...location, pathname: pathname.slice(0, -1) }} />
          <Route path='/random-route' />
          <Route path='/another-router' />
          <Route>
            <AuthProvider>
              <Router path='/team/:teamId'>
                {/* THIS IS THE ROUTE THAT RE-RENDERS WHEN CHILD v6 ROUTES CHANGE*/}
                <CompatRoute path='/team/:teamId/my-v6-route' component={Myv6Component} />
              </Router>
            </AuthProvider>
          </Route>
          <Route path='/more-routes' />
        </Switch>
      </CompatRouter>
    </Router>
  )
}

Here's what happens in prod mode. Whenever I navigate to one of the child routes inside the migrated Route that's using the CompatRoute, the whole CompatRoute re-renders and refetches the data parent. The child route appears as a drawer on the right hand side of the screen, which fetches the details for that item. But at the same time, behind that drawer, is the table of items being loaded again. When I close the drawer, which naturally navigates back to the parent route, the table reloads again. I don't know if this library is doing something different when built for production, or if it's the redirect way up there. I've tried many optimization techniques, like making sure components that fetch data are isolated (data is loaded where it's needed, instead fetching it way up in the tree and passing the data down as props). But I realized that wasn't it. I even created a fake route with child routes, witch fake data fetchers but it behaves exactly the same. Somewhere, when it's built for prod, something is making the parent route re-render whenever the v6 child routes change.

Any thoughts on this? Have you experience the same issue? What have you done to fix it? I'll try to recreate this issue in a sandbox environment and post it here later on. Just wanted to get initial thoughts.

[josemlrod]

Were you able to fix this? What approach did you take?