tab conpment Too slow to switch

I have a problem in switching <Tab> 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 <TabContainer> 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.

[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

[tobychidi-zz]

Still having the same issue. Please what can be done?

The tab switch animation is frozen while components render…