title: Material UI React table hangs on switching tabs
body: <p>I created SPA using react with these compnents: BrowserRouter, Route, Link, AppBar, Toolbar, Tabs, Tab, MaterialTable.</p>
  <p>Everything works fine except, when I switch between the tabs (clicking on PAGE1, PAGE2 links) rapidly the browser hangs. This happens in both Chrome and Firefox. I am not using any state or hooks.</p>
  <p>The codesandbox link: <a href="https://codesandbox.io/s/winter-pond-1zsn3?file=/public/index.html" rel="nofollow noreferrer">https://codesandbox.io/s/winter-pond-1zsn3?file=/public/index.html</a></p>
  <p>App.js:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import { BrowserRouter, Route, Switch } from &quot;react-router-dom&quot;;
  import Page1 from &quot;./Page1&quot;;
  import Page2 from &quot;./Page2&quot;;
  import Header from &quot;./Header&quot;;
  
  export default function App() {
    return (
      &lt;BrowserRouter&gt;
        &lt;Header /&gt;
        &lt;Switch&gt;
          &lt;Route exact path=&quot;/Page1&quot; component={Page1}&gt;&lt;/Route&gt;
          &lt;Route exact path=&quot;/Page2&quot; component={Page2}&gt;&lt;/Route&gt;
        &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
    );
  }
  </code></pre>
  <p>Header.jsx</p>
  <pre><code>import React from &quot;react&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import { AppBar, Toolbar, Tabs, Tab } from &quot;@material-ui/core&quot;;
  
  const Header = () =&gt; {
    return (
      &lt;AppBar position=&quot;static&quot;&gt;
        &lt;Toolbar&gt;
          &lt;Tabs&gt;
            &lt;Tab label=&quot;Page1&quot; to=&quot;/Page1&quot; component={Link} /&gt;
            &lt;Tab label=&quot;Page2&quot; to=&quot;/Page2&quot; component={Link} /&gt;
          &lt;/Tabs&gt;
        &lt;/Toolbar&gt;
      &lt;/AppBar&gt;
    );
  };
  
  export default Header;
  </code></pre>
  <p>Page1.jsx</p>
  <pre><code>import React from &quot;react&quot;;
  
  const Page1 = () =&gt; {
    return &lt;div&gt;Page1&lt;/div&gt;;
  };
  
  export default Page1;
  </code></pre>
  <p>Page2.jsx</p>
  <pre><code>import React from &quot;react&quot;;
  import MaterialTable from &quot;material-table&quot;;
  
  const taskColumns = [
    { title: &quot;Task Name&quot;, field: &quot;TaskName&quot; },
    { title: &quot;Task Description&quot;, field: &quot;TaskDesc&quot; }
  ];
  const Page2 = () =&gt; {
    return &lt;MaterialTable title=&quot;Task List&quot; columns={taskColumns} data={[]} /&gt;;
  };
  
  export default Page2;
  </code></pre>