Vulcan
Vulcan copied to clipboard
VulcanJS
Layout remounts on navigation
Starting with Vulcan 1.13, due to the switch to react-router-4, Layout remounts on every navigation event. This means that any route-independent state on Layout or any of its route-independent children, it will be reset on navigation.
For us, this is a significant regression since we have route-independent navigation with state (eg a notification tray) which gets remounted, as well as some assorted important globals (the rendered timezone, an optimistic-update cache for a case that Apollo otherwise couldn't handle).
Related to: https://stackoverflow.com/questions/42862028/react-router-v4-with-multiple-layouts
Not sure yet how to handle this. Maybe identifying automatically registered routes that got the same layout, and creating a group of routes for each layout (as stated in the new solution of this comment https://stackoverflow.com/a/42863173/5513532).
Also can this state be moved in an App wrapper instead? Or maybe you need to switch it/reset it on certain route changes?
We fixed this for our own use case by almost-completely ripping out react-router-v4 and implementing our own routing. However, this came at the expense of being able to use withRouter (as opposed to our own context providers), and probably also some other API subtleties of Vulcan. See https://github.com/LessWrong2/Lesswrong2/blob/devel/packages/vulcan-core/lib/modules/components/App.jsx .
(There's a broader lesson here, which is that architectural churn is much more expensive for downstream projects than you think. From my perspective, react-router-v4 was an unwelcome imposition that cost us a lot of time for no benefit.)
It seems that this comment could help us to avoid remounting when components share the same layout: https://stackoverflow.com/a/57358789 I haven't tested much but it seems to be functional. For us that would mean parsing the route array once to group route per layout. However you will have a remount whenever the layout change even with this technique.
This seems relevant? https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/
Fun fact: I was going to paste the same article, almost a year later. Yeah it's completely relevant and technically that's what we should do in Vulcan.
So my PR is the "naive" pattern of remounting only on layout change, and the current implementation is the layout that remount systematically