Navbar flicker/rerender across route sets

I’m seeing the navbar flickering when changing to routes under a different set (but using the same layout). This is the case even if the navbar component is wrapped with React.memo(). From what I understand, it looks like during set transition, the layout instance is being replaced by another instance of the same component. In my setup, the NavBar is a child of the layout, it therefore gets scrapped and replaced by another navbar instance.

I’d like to ask what is the right way to ensure that ever-present elements like navbar and footers don’t get reinstantiated or pre-rendered unless their own props or children change.

I suppose one way to do it would be to place navbar and footers in App.tsx above Routes but that seem a bit weird to me that such elements would be defined outside page layouts. Not sure if I’m understanding the role of layouts properly. I can use some clarification here.

Thank you!

Upon re-reading the router docs I believe I can use nested sets. By placing all the routes with the basic <Navbar/><...main><Footer/> in the top level set, then use the next level of nesting to manage the layout of <...main>.

Would still love to get feedback on whether this is the best way to handle the layout of the application shell.