[Tabs] Improve tab panels mounting behavior

Based on #21241, we might have an opportunity to improve the TabPanel mounting behavior. We can potentially fix these problems:

• Lost states between different panels (by keeping the panels mounted)
• Improve the performance of panel transitions (by mounting the panels ahead of time)
• Improve the SEO support (by rendering all the panels’s content)

I have used the following benchmark list https://trello.com/c/JM6Zh3YW/2642-tabs to look at what the others are doing

1. hidden prop with full rendering and no option to disable it https://github.com/reach/reach-ui/blob/115eb680bae13e7e097c9a6cd3047c06530ee880/packages/tabs/src/index.tsx#L643

• Reach UI
• Reakit
• Garden
• Chakra
• React Bootstrap

1. lazy render the content of the tab panels, keep them mounted when moving to a different tab

• Antd (plus a forceRender prop to render all the panels)

1. only render the active tab panel

• Base Web (plus a renderAll prop to render all the panels)
• Material-UI
• JetBrains
• Semantic UI
• AltasKit
• Polaris

1. render in two passes, first the active panel, then all the panels

• react-swipeable-views

In the future, React will likely provide better support for offscreen rendering

What do you guys think between these different tradeoffs? It seems that we need, at least, a way to enable the mounting of all the panels.

[ambroseus]

@oliviertassinari I use simple solution to have always mounted TabPanels:

export function TabPanel(props: any) {
  const {
    children,
    className,
    style,
    value: id,
    Container = DefaultContainer,
    ...other
  } = props
  const context = useTabContext()

  if (context === null) {
    throw new TypeError('No TabContext provided')
  }
  const tabId = context.value

  return (
    <div
      className={className}
      style={{
        width: '100%',
        ...style,
        position: 'absolute',
        left: 0,
        visibility: id === tabId ? 'visible' : 'hidden',
      }}
      {...other}
    >
      <Container>{children}</Container>
    </div>
  )
}

[eps1lon]

If anybody wants to make a deep dive into React 18 then I would suggest investigating wrapping the panel content in React.Suspense. Eventually you’ll want to use an upcoming Offscreen API for the hidden TabPanels so React can de-prioritize the hidden panel (and persist state when it gets hidden). There are also interesting questions like selective hydration for hidden TabPanels that would be enabled by React.Suspense and how this behaves when the user starts navigating to a TabPanel before it is hydrated.

I don’t have a full picture for this yet hence why I suggest that somebody investigates this area since I believe tabs can really make use of React 18.

Edit:

In the future, React will likely provide better support for offscreen rendering

I think it’s safe to assume that this will happen.