Avoid re-rendering in React when switching between tabs

Question

I have a 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 is a functional component and does some heavy computation.
Is it possible to prevent TabContainer from re-rendering when switching between tabs?

Update:
Check my answer for a solution with React functional components and css classes.

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.

Answer 2

Update/Partial Solution:
With the below code (based on Rahul Jain's answer) using css classes to display the active TabContainer, the memoized functions seems to be really memoized.

    const useTabContainerStyles = makeStyles((theme: Theme) =>  createStyles({
        root: {
          padding: 8 * 3
        },
        tabcontainerInActive: {
          display: "none"
        }
      })
    );

    function TabContainer(props: TabContainerProps) {
      const styles = useTabContainerStyles({});
      console.log("In TabContainer");
      const doubleValue = useMemo(() => double(props.id), [props.id]);
      return (
        <Typography
          id={props.id.toString()}
          component="div"
          className={classnames(styles.root, {
            [styles.tabcontainerInActive]: !props.active
          })}
        >
          {props.children + " " + doubleValue}
        </Typography>
      );
    }

    export default function SimpleTabs() {
      const classes = useStyles({});
      const [selectedTab, setSelectedTab] = React.useState(0);

      function handleChange(event: React.ChangeEvent<{}>, newValue: number) {
        setSelectedTab(newValue);
      }

      return (
        <div className={classes.root}>
          <AppBar position="static">
            <Tabs value={selectedTab} onChange={handleChange}>
              <Tab label="Item One" />
              <Tab label="Item Two" />
              <Tab label="Item Three" />
            </Tabs>
          </AppBar>
          {/*  */}
          <TabContainer id={0} active={selectedTab === 0}>
            Item One
          </TabContainer>
          <TabContainer id={1} active={selectedTab === 1}>
            Item Two
          </TabContainer>
          <TabContainer id={2} active={selectedTab === 2}>
            Item Three
          </TabContainer>
        </div>
      );
    }