Tabs are forgetful

[SheepTester]

Switching between tabs will cause the old tab to lose its state because they're not rendered and consequently unmounted. For example, switching from the minimum finals score calculator to the schedule and back will reset the tab to the barcode tab and reset all the values in the calculator. In addition, for tabs with a large number of items (eg the club or staff list), React has to re-create many elements, which results in a mild lag spike every time the tab is switched to.

I suggest using <Route children> to continue to have other tabs' content in the DOM even when they're not visible. This way, the elements still exist in DOM, and React doesn't unmount and reset the components' state. To reduce the memory used, it could be clever and only use display: none once the tab has been rendered (eg if you never click on the Classes tab, its content will never exist in DOM, but once you click on the Classes tab and click away, it'll stay in the DOM but with display: none;). In addition, perhaps there could be a timer to unmount the tab content if it remains unused for a while

[ky28059]

The forgetful tabs might be an issue, but its not caused by state being discarded on unmount. The tabs used in utilities and settings are NavTabs, which means they rely on the URL to determine whether they are active and not state (allowing for people to refresh WATT and stay on the same tab as well as hyperlink to specific tabs). The sidebar links are all to the base URLs (/utilities par exemple) and thusly the old URL is forgotten about. Fixing this would be rather challenging, as you'd have to remember what the previous URL was and dynamically set the specific sidebar link to that section to be the remembered URL.