Avoid re-rendering in React when switching between tabs

169
January 18, 2020, at 7:20 PM

So I have react application using material-ui to create tabs.

<div className={classes.root}>
  <AppBar position="static">
    <Tabs value={value} onChange={handleChange}>
      <Tab label="Item One" />
      <Tab label="Item Two" />
      <Tab label="Item Three" />
    </Tabs>
  </AppBar>
  {value === 0 && <TabContainer id={1}>Item One</TabContainer>}
  {value === 1 && <TabContainer id={2}>Item Two</TabContainer>}
  {value === 2 && <TabContainer id={3}>Item Three</TabContainer>}
</div>

The TabContainer functional component does some heavy computation.
Is it possible to prevent TabContainer from re-rendering when switching between tabs?

Answer 1

In order to prevent TabContainer from re-rendering. You have to

  1. Render all TabContainer data at once instead of rendering based on value.
  2. You have to play with CSS and have to display only that tab which is currently active.
  3. Also you can make your component as PureComponent or you can override shouldComponentUpdate() lifecycle method to stop extra re-rendering of your react component.
Rent Charter Buses Company
READ ALSO
mock fs.readFile - Unit test

mock fs.readFile - Unit test

I am using Jest framework for unit testing and came across a scenario to mock the fsreadFile

312
How to structure router.js file in VueJs?

How to structure router.js file in VueJs?

I want to structure my routerjs file as currently there is around 500 lines of code in it

182
am4charts doesn&#39;t worked for time variables but its worked fine for autoid variables

am4charts doesn't worked for time variables but its worked fine for autoid variables

I was shown my data in am4chartsIntially i was create x axis with id field but now i want time fields

180
Can someone give a more real-world example where the setState(updaterFunc) function is more useful than the setState(object)?

Can someone give a more real-world example where the setState(updaterFunc) function is more useful than the setState(object)?

the react docs said that is better to use the setState(updaterFunc) rather than the setState(object) because it will have the latest stateI know setState is async, that's why we use the setState(updaterFunc) to have the latest state

156