mi6
Update the tabs component to only render the content of the visible / open tab panel
Summary
Make only the content of the selected tab panel render in the DOM.
💬 Description
At the moment, when rendering the tabs component, the content of all of the tabs is rendered in the DOM - e.g.:
This means elements are being rendered even if they are not needed (the user may not even look at the other tabs at all). The greater the amount of nodes that are defined in HTML, the greater the time spent processing and rendering each element, meaning that rendering content in tab panels that aren't open is causing unnecessary energy consumption - especially if there is a lot of content.
The solution is to only render the content of a tab panel when the tab is actually selected (and remove it from the DOM when it is no longer selected).
There are other design systems / libraries that do this, e.g. MUI:
Or Semantic UI React (see at the bottom how only the current tab panel is displayed):
💰 Use value
As mentioned above, this change will be beneficial from a sustainability perspective, and it is likely to improve performance of apps using tabs - particularly if they are passing in a lot of content into the tab panels.
This has been marked as a breaking change because this may cause issues with persisting data across the different tab panels. For example, if there is an app using tabs with each tab panel containing one section of an overall form, would removing the tab panels from the DOM break this functionality?
