Tabs isLazy behavior

🚀 Feature request

Possibly change isLazy behavior to mount on first select and never unmount. If we want to keep the current behavior, consider adding a new prop.

🧱 Problem Statement / Justification

I read through https://github.com/chakra-ui/chakra-ui/issues/1384 to understand the problem isLazy is trying to solve. There are two distinct features asked for in that issue:

• Do not mount all tabs at once, since they might do data loading.
• Mark individual tab panels as lazy. This was a later feature request, not added in the linked PR.

The solution to the problem above was to mount on select and unmount on a different tab being selected. I think this can be improved to further reduce data loading.

Currently a lazy tab will unmount whenever it’s unselected, causing it to load data on being selected again. A true lazy tab will only mount once, on first selection. This mount-on-first-selection behavior makes the second feature request above unnecessary.

✅ Proposed solution or API

Pretty simple. Each tab panel has an internal flag (useRef) to keep track of whether it has ever been selected.

• If it has not been selected and it’s not active, render null
• Otherwise set the flag to true and render its children as normal.

↩️ Alternatives

If we don’t want to change the isLazy behavior, we could add a new prop.

Can anyone think of a use case where the current behavior is preferred over the one I’m suggesting?

📝 Additional Information

N/A

[with-heart]

@stellarhoof No prob! I think what you added probably makes more sense as the default for the reasons you originally provided, but we can’t change that default until we make a major release.

For the time being, once the PR is merged <Tabs isLazy unmountHiddenPanels={false}> will enable the behavior you added

[stellarhoof]

@with-heart That’s a good point. Thanks for catching that.