I have a single page application written in React. The app has multiple pages which can be displayed when the user clicks the tabs on the Nav Bar. So there are 2 possible designs:
Mount the pages 1 at a time; unmount and remount whenever the user switches between pages via clicking the tab.
Mount all of the pages simultaneously and only display the page selected while setting the rest to display = "none".
Questions:
I believe this has nothing to do with best practice or performance. It all depends on what you are trying to achieve.
Keep in mind the following:
Mounting / remounting always resets the component's state and reruns the useEffect hooks (this is something really really useful in react's world). This means that if you use for example a stepper and you move between steps, let's say you fill some forms, then going front and back, your components will lose their previous state and your forms will be emptied (because they are mount again).
But, if you you use display = none the state of your components is persistent and your forms will be filled with the previous values. (Obviously you can achieve the same behavior with the first approach but you will need some effort to do so, an effort that will save you some time in a later point)
I do not say the one is better than the other, but there are some serious considerations you have to know before choosing one over the other
(don't use display=none unless you are into some serious css tricks)