How to lazy-load tabs on antd?

Question

I am using antd tabs and I have 2 tabs on my page. Both load at the same time but I want only the first tab to load on mount and onchange of tab the other tab should be rendered. I am unable to achieve this functionality.

Is there a way to resolve this issue?

Dentalium

Answer 1

According to the documentation, the default for the forceRender prop on the Tabs.TabPane component in your code should be false.

The prop is used to: Forced render of content in tabs, not lazy render after clicking on tabs:

https://ant.design/components/tabs/

On what basis are you assessing that the content is not lazy rendered? Perhaps you can share some code.

Beyond this, you may want to handle more complex rendering within your component tabs using state.

I hope this helps.

Tchad

I want to render content of the second tab based on the data I get from api call in the first tab. How can this be done? – Punke

Answer 2

Try destroyInactiveTabPane prop on Tabs.

const App = () => {
  return (
    <Tabs
      items={items}
      destroyInactiveTabPane={true} // add this prop
    />
  );
};

Thayne