title: Load Specific Tab Component in React
body: <p>I have a several tabs in my react app and i only wanted to load that specific tab when i click it.
  Right now, my problem is that other tabs is also rendering when i click a specific tab. I have use <code>console.log</code> to see if other tabs is rendering and is really is. How can i prevent that from happening. I wanted to load a tab only when i click it.</p>
  <p>Pls see my codesandbox here:
  <a href="https://codesandbox.io/s/tabs-material-ui-react-z3gt9" rel="nofollow noreferrer">CLICK HERE</a></p>
  <pre><code>  &lt;div&gt;
        &lt;AppBar position=&quot;static&quot; color=&quot;inherit&quot; className={classes.root}&gt;
          &lt;Tabs
            value={value}
            onChange={handleChange}
            indicatorColor=&quot;primary&quot;
            textColor=&quot;primary&quot;
            variant=&quot;scrollable&quot;
            scrollButtons=&quot;auto&quot;
            aria-label=&quot;scrollable auto tabs example&quot;
          &gt;
            &lt;Tab label=&quot;Users&quot; component={Link} to=&quot;/users&quot; {...a11yProps(0)} /&gt;
            &lt;Tab
              label=&quot;Products&quot;
              component={Link}
              to=&quot;/products&quot;
              {...a11yProps(1)}
            /&gt;
            &lt;Tab label=&quot;Sales&quot; component={Link} to=&quot;/sales&quot; {...a11yProps(2)} /&gt;
          &lt;/Tabs&gt;
        &lt;/AppBar&gt;
        &lt;TabPanel value={value} index={0}&gt;
          &lt;Users /&gt;
        &lt;/TabPanel&gt;
        &lt;TabPanel value={value} index={1}&gt;
          &lt;Products /&gt;
        &lt;/TabPanel&gt;
        &lt;TabPanel value={value} index={2}&gt;
          &lt;Sales /&gt;
        &lt;/TabPanel&gt;
      &lt;/div&gt;
  </code></pre>