Material-ui: tab conpment Too slow to switch

[zhoutengshen]

I have a problem in switching component. It's too slow to switch animation, there are more delays than 1000ms.
My Component structure looks like this:

<div>
    <Tabs
        value={value}
        onChange={this.handleChange}
        >
            <Tab label="Item One" />
            <Tab label="Item Two" />
     </Tabs>
      {value === 0 && <TabContainer>Item One</TabContainer>}
</div>

The component is a complex component, where there are many data needs to be displayed.
I want the < Tab > component to complete the switching animation immediately, instead of waiting to happen with the < TabContainer > component.

[oliviertassinari]

@zhoutengshen Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

[zhoutengshen]

This is part of my project at codesandbox's address: .
There is delay in Tab handover animation here.
(ps:, I'm sorry for the bad English). @oliviertassinari

[ivaqmo123]

I am having the same issue...the switch to a tab with a mui-datatable inside takes about 3 seconds to switch...any help please?

Ivan

[oliviertassinari]

@ivaqmo123 Try using the React dev tool to see what rerender. Also, try replacing the tab component with a simple button to see if it helps. The tab slowness is likely the tip of the iceberg, hiding something wrong.

[ivaqmo123]

Hi @oliviertassinari, i changed the tab to render another mui datatable with less récords and the tab switch is a little bit faster. Seems this delay happens when tab needs to render More data, in muy case it Is 167 Rows which i think Is not many data.

[orpheus]

I'm facing a similar issue when switching between tabs. On change it triggers a redux action which changes a variable that is fed to a connected container component which renders the tabs. There's a lot going on in the connected component and I think that's what's causing the lag. Remove the action that fires onChange and the speed of tab switching is fine.

My case is too complex to easily reproduce. But I wanted to just note that I have a similar issue when dealing with large data sets that have to go through a rerender process on tab change. Ill try to memoize what I can and see if that helps