title: Accidental early return statement
body: <p>I have trying to make a responsive navbar in React using Material UI but this code crashes when the window sizes reduces below 900px giving the error <strong>Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.</strong>  The error is in the useEffect hook. But I just can't figure out why this giving me a error. I am guessing it is because of violation of a hook rule. But I have tried everything but I am still not able to fix it.</p>
  <pre><code>import React,{useEffect,useState} from 'react'
  import {AppBar ,Toolbar, Container ,makeStyles,Button, IconButton ,Drawer} from '@material-ui/core'
  import MenuIcon from '@material-ui/icons/Menu'
  
  const usestyles = makeStyles({
    root:{
      display:'flex',
      justifyContent:'space-between' ,
      maxWidth:'700px'
    },
    menubtn:{
      fontFamily: &quot;Work Sans, sans-serif&quot;,
      fontWeight: 500,
      paddingRight:'79px',
      color: &quot;white&quot;,
      textAlign: &quot;left&quot;,
    },
    menuicon:{
      edge: &quot;start&quot;,color: &quot;inherit&quot;,paddingLeft:'0'
    }
  })
  
  const menudata = [
    {
      label: &quot;home&quot;,
      href: &quot;/&quot;,
    },
    {
      label: &quot;About&quot;,
      href: &quot;/about&quot;,
    },
    {
      label: &quot;Skill&quot;,
      href: &quot;/skills&quot;,
    },
    {
      label: &quot;Projects&quot;,
      href: &quot;/projects&quot;,
    },
    {
      label: &quot;Contact&quot;,
      href: &quot;/contact&quot;,
    },
  ];
  
  
  function Navbar() {
    const [state, setState] = useState({mobileview:false,draweropen:false});
    const {mobileview,draweropen} = state;
    const {menuicon,root} =usestyles();
  
  
    function getmenubuttons(){
      const {menubtn} = usestyles();
      return menudata.map(({label,href})=&gt;{
        return &lt;Button className={menubtn}&gt;{label}&lt;/Button&gt;
      })
    }
  
  
    function displaydesktop(){
  
      return &lt;Toolbar &gt;
        &lt;Container maxWidth={false} className={root}&gt;
          {getmenubuttons()}
        &lt;/Container&gt;
      &lt;/Toolbar&gt;
    }
  
    function displaymobile(){
  
      return &lt;Toolbar&gt;
        &lt;IconButton className={menuicon} &gt;
          &lt;MenuIcon /&gt;
        &lt;/IconButton&gt;
  
      &lt;/Toolbar&gt;
    }
  
    useEffect(() =&gt; {
      const setResponsiveness = () =&gt; {
        return window.innerWidth &lt; 900
          ? setState((state)=&gt;({ ...state, mobileview: true }))
          : setState((state)=&gt;({ ...state, mobileview: false }));
      };
  
      setResponsiveness();
  
      window.addEventListener(&quot;resize&quot;, () =&gt; setResponsiveness());
    }, []);
  
    return (
      &lt;div&gt;
        &lt;AppBar&gt; {mobileview? displaymobile() :displaydesktop() } &lt;/AppBar&gt;
      &lt;/div&gt;
    )
  }
  
  export default Navbar;
  
  </code></pre>