Performance issue: inactive tabs should not be rendered

Feedback summary

As far as I can tell, Paragon currently processes and renders the entire React component tree for all tabs in a <Tabs> component. This can cause poor performance when tabs are used for major parts of the application, not only because of unnecessary rendering but can also cause unnecessary data loading and API calls if the inactive tabs have those.

Here is a simple example showing the issue. No messages should be logged to the console, but two messages are logged from the contents of the inactive tab:

Improved API

Generally, the way to fix this is to make each <Tab> accept the child component as a prop, and not as JSX children. Then it can be conditionally rendered.

i.e. <Tab><Child /></Tab> becomes <Tab component={Child} />

Simple Workaround

Alternately, the docs could be updated to say that <Tabs> should only be used for "minor" parts of an application, like two different views within a modal, and that larger chunks of the application should strictly use <Nav variant="tabs"> (which is available in Paragon) together with a router to control the "tab pane" content. At the moment, we don't seem to document nor encourage this pattern. The only openedx example I could find of using <Nav variant="tabs'> is not using a client-side router.

So, I don't have a working Paragon example handy (even though I think it's possible), but here is a working example from another application I made, using Catalyst Navbar as the Tabs component and wouter as the routing framework. In this example, only the active tab is rendered.

Start with the component documented at the linked Paragon page and reproduce the console-logging example to confirm that inactive tab content renders. Clarify whether the intended fix is the proposed component-prop API or documentation for using Nav tabs with a router; done should mean inactive tab content is not rendered or loaded, with the chosen behavior documented.