1

Context

I use a nested routes/layout setup in react-router (v6.8).

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<BasicLayout />}>
      <Route path="demo" element={<BasicNestedLayout />}>
        <Route path="index" element={<Index />} />
        <Route path="about" element={<About />} />
        <Route path="topics" element={<Topics />} />
      </Route>
    </Route>
  )
);

The user can click Link components on BasicNestedLayout to switch between the three sub routes (index, about and topic).

Here is a reproducible example: app | stackblitz editor

Problem

When monitoring the app with React Chrome DevTools, it looks like everything on the page does rerender when I click on a Link. This includes BasicLayout, which contains just the App Header and is the parent of BasicNestedLayout where the Link and its dependent content lives. All components are highlighted (devtools option = Highlight updates when components render).

enter image description here

A quick search on StackOverflow reveals that this was already a challenge in react-router v4/5, but the accepted answers suggest to switch route props from component= to render=, which have both been replaced by element= in v6 (doc).

How can one prevent the rerender of BasicLayout when nothing has changed apart from its children?

Alternatively, is it possible that the React Dev Tools is wrong? I noticed that the useEffect hooks, written without dependencies to run at each rerender, don't seem to print their console.log() in the Console more than once.


Related but still different questions: 1, 2, 3

xav
  • 4,101
  • 5
  • 26
  • 32
  • What exactly is the issue you are seeing here? What are the exact steps to reproduce the issue you describe? I don't see more than one set of console logs, so the layout components aren't rerendering. I think you might be conflating repainting the view with React component rerendering. Compounding the confusion is that it seems stackblitz is *also* a react app, so when selecting "Highlight updates when components render" it seems it displays when that app is also triggering repaints. – Drew Reese Feb 02 '23 at 16:57
  • Generally you should just let React rerender when React thinks it should rerender, it's optimized quite well for 60fps performance. Only look to optimize if you've an actual measured/audited performance issue. – Drew Reese Feb 02 '23 at 16:59
  • Thank you for taking the time to comment. I tried to improve the question by adding a GIF showing the ReactDevTools highlights. I agree that I am indeed confused: according to its label, the devtools highlights "rerenders", which for me should trigger the `console.logs`. Regarding Stackblitz, I think that, if you run the app in a dedicated tab, you get the same behavior as I have on the real app. – xav Feb 03 '23 at 09:04
  • The console logs in the `useEffect` hook programmatically prove the component didn't rerender. I don't suspect there is any issue with the React code. At this point I'd say it's something in the React dev-tool that is misleading or incorrect. – Drew Reese Feb 03 '23 at 09:05
  • Thanks for helping me stop question my sanity. Further research online seem to show that people have encountered similar issues with the DevTool when using library like redux/mobx. Do you think I should delete the question? – xav Feb 03 '23 at 10:12
  • Perhaps. It certainly doesn't appear to be answerable or on-topic for SO if it's an issue with the browser extension. – Drew Reese Feb 03 '23 at 10:16

0 Answers0