7

In the process of upgrading my react app to react-router-dom v6, I had to refactor how the nested routing is handled. In the previous versions of react-router-dom, I managed to declare nested routes in child components, and that avoided re-rendering the parent component every time the route changed in the app.

The configuration could be summarized as something like this:

const Component = React.lazy(() => import('./path/to/Component'));

<Switch>
    <Route path="..." component={Component} />
</Switch>

Then, inside the Component:

const NestedComponent = React.lazy(() => import('./path/to/NestedComponent'));

const Component = ({match}) => {
...
    <Route path={match.url} component={NestedComponent} />
...
}

Following the upgrade guide for react-router-dom v6, I refactored the components above into something as the following:

const Component = React.lazy(() => import('./path/to/Component'));

<Routes>
    <Route path=".../*" element={
        <React.Suspense fallback={"loading 1..."}>
            <Component />
        </React.Suspense>
    } />
</Routes>

Then in the component:

const NestedComponent = React.lazy(() => import('./path/to/NestedComponent'));

const Component = ({match}) => {
...
    <Routes>
        <Route path={match.url} element={
            <React.Suspense fallback={"loading 2..."}>
                <NestedComponent />
            </React.Suspense>
        } />
    </Routes>
...
}

What I expected would have been that the Component component would not re-render while changing the route, only the NestedComponent (hence, showing only loading 2... inside the Component). But instead, when I change the route, all the components re-render. Also, I'm not sure whether with the new syntax (using element instead of component in the Route component) makes sense combined with React.lazy.

Is there a way to avoid the re-rendering of the parent component?

With the new syntax, does it make sense to use React.lazy? Or is there another way to lazily load components?

Massimiliano
  • 615
  • 4
  • 15
  • 1
    I'm not sure I follow your comment about the new route syntax not making sense to use `React.lazy` when this is the [literal sample case for switching to an `element` prop](https://reactrouter.com/docs/en/v6/faq#why-does-route-have-an-element-prop-instead-of-render-or-component). Here's the [Lazy Loading Example](https://reactrouter.com/docs/en/v6/examples/lazy-loading). Is there an actual issue if the parent component rerenders? – Drew Reese Jan 23 '22 at 00:18
  • My bad, I didn't find the page in the documentation, and I have to admit I didn't fully understood the difference between entity, component and instance in React (here for reference: https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html). I've noticed that the lazily defined component is wrapped around a suspense, does any lazy component have to be wrapped around it? Finally, about the parent component re-rendering, there's no problem in itself, I was asink because it is actually possible in v6 in the previous version, and it was visually better. – Massimiliano Jan 23 '22 at 00:30

0 Answers0