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!
Edit:
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.