title: React Page Scrolls on top after re render by useEffect
body: <p>My problem - whenever i use <code>&lt;Tabs&gt;</code> component the <code>onChange</code> method calls the <code>handleTabChange</code> function. The component gets called again and the after repainting the <code>useEffect</code> gets called. This causes my page to scroll on top. </p>
  
  <p>How do i make sure the <code>handleChange</code> and <code>useEffect</code> does not cause the page to scroll on top?</p>
  
  <pre><code>export function VarianceGraph({ variancesGraphData }) {
    if (variancesGraphData === undefined) {
      return null;
    }
    const [currentProject, setCurrentProject] = useState('All');
    const [currentTab, setCurrentTab] = useState('ABCD');
    const projectCodes = prepareProjectCodesForConsumption(variancesGraphData);
    let data = {};
  
    function handleProjectChange(event) {
      const { value } = event.target;
      setCurrentProject(value);
    }
  
    function handleTabChange(event, tabValue) {
      setCurrentTab(tabValue);
    }
  
    data = prepareProjectDataForRechartsConsumption(currentProject, variancesGraphData);
    const hideABCD = data.ABCD.length &lt; 1;
    const hideBCDF = data['BCDF'].length &lt; 1;
  
    useEffect(() =&gt; {
      if (hideABCD &amp;&amp; hideBCDF) {
        setCurrentTab('None');
      } else if (hideABCD) {
        setCurrentTab('BCDF');
      } else if (hideBCDF) {
        setCurrentTab('ABCD');
      }
    });
  
    return (
      &lt;Grid container direction="row" justify="flex-start" alignItems="flex-start"&gt;
        &lt;Grid item xs={12}&gt;
  </code></pre>
  
  <p>I have tried - </p>
  
  <p>I need to have the <code>setCurrentTab</code> in some function so as to not render infinitely. </p>
  
  <p>I have tried using the <code>useLayoutEffect</code> but it has the same behavior.</p>
  
  <p>I can write the component code further if required. Please help. Thanks in advance.</p>