css - Rendered fewer hooks than expected error in the return statement

Question

I am trying to build a simple navbar but when I define a setResponsivness function inside my useEffect I am getting the error Rendered fewer hooks than expected. This may be caused by an accidental early return statement. I looked at similar answers for the same but till wasn't able to fix

Here s my code

import React,{useEffect,useState} from 'react'
import {AppBar ,Toolbar, Container ,makeStyles,Button, IconButton} from '@material-ui/core'
import MenuIcon from '@material-ui/icons/Menu'

const usestyles = makeStyles({
    root:{
       
        display:'flex',
        justifyContent:'space-between' ,
        maxWidth:'700px'
    },
   menubtn:{
    fontFamily: "Work Sans, sans-serif",
    fontWeight: 500,
    paddingRight:'79px',
    color: "white",
    textAlign: "left",
    },
    menuicon:{
      edge: "start",color: "inherit",paddingLeft:'0'
    }
})

const menudata = [
    {
      label: "home",
      href: "/",
    },
    {
      label: "About",
      href: "/about",
    },
    {
      label: "Skill",
      href: "/skills",
    },
    {
      label: "Projects",
      href: "/projects",
    },
    {
      label: "Contact",
      href: "/contact",
    },
  ];

//yet to target link for the smooth scroll
function getmenubuttons(){
    const {menubtn} = usestyles();
    return menudata.map(({label,href})=>{
        return <Button className={menubtn}>{label}</Button>
    })
} 
//to display navbar on desktop screen
function displaydesktop(){
    const { root } = usestyles() //destructuring our custom defined css classes
    return <Toolbar ><Container maxWidth={false} className={root}>{getmenubuttons()}</Container>   </Toolbar>
}
//to display navbar on mobile screen
function displaymobile(){
  const {menuicon} =usestyles() ;
  return <Toolbar><IconButton className={menuicon}><MenuIcon />  </IconButton></Toolbar>
}
function Navbar() {
     const [state, setState] = useState({mobileview:false});
     const {mobileview} = state;

     useEffect(() => {
      const setResponsiveness = () => {
        return window.innerWidth < 900
          ? setState((prevState) => ({ ...prevState, mobileview: true }))
          : setState((prevState) => ({ ...prevState, mobileview: false }));
      };
  
      setResponsiveness();
  
      window.addEventListener("resize", () => setResponsiveness());
    }, []);
    return (
        <div>
          <AppBar> {mobileview?displaymobile():displaydesktop()} </AppBar>        
        </div>
    )
}

export default Navbar;

question from:https://stackoverflow.com/questions/66059864/rendered-fewer-hooks-than-expected-error-in-the-return-statement

Answer 1

Your problem seems to be here

{mobileview?displaymobile():displaydesktop()} 

For example the displaymobile function inside uses hooks right (usestyles)? Then it means you are rendering hooks inside conditions (mobileview being condition) which is not allowed by rules of hooks.

You can fix it like this:

    <div>
      <AppBar> {mobileview ? <Displaymobile /> : <Displaydesktop />} </AppBar>
    </div>

Also change definition of component using capital letters as that is how react refers to components. e.g.

function Displaydesktop() {
  const { root } = usestyles(); //destructuring our custom defined css classes
  return (
    <Toolbar>
      <Container maxWidth={false} className={root}>
        {getmenubuttons()}
      </Container>{" "}
    </Toolbar>
  );
}

Now we consume them as components. Probably when you used lower case letters and called those as functions in your render, react interpreted them as custom hooks, hence the warnings.