Invalid hook call Hooks can only be called inside of the body of a function component

Question

I am new to React and Now I would like to show some record in the table and now I got this error  Help me  please      Invalid hook call  Hooks can only be called inside of the body of a   function component  This could happen for one of the following   reasons    1  You might have mismatching versions of React and the renderer  such as React DOM    2  You might be breaking the Rules of Hooks   3  You might have more than one copy of React in the same app See for tips about how to debug and   fix this problem    import React  Component  from  react   import   makeStyles   from   material-ui core styles   import Table from   material-ui core Table   import TableBody from   material-ui core TableBody   import TableCell from   material-ui core TableCell   import TableHead from   material-ui core TableHead   import TableRow from   material-ui core TableRow   import Paper from   material-ui core Paper    const useStyles   makeStyles theme   gt         root          width   100          marginTop  theme spacing 3         overflowX   auto              table          minWidth  650                 class allowance extends Component      constructor            super            this state               allowances                            componentWillMount             fetch  http   127 0 0 1 8000 allowances            then data  gt                  return data json                      then data  gt                           this setState  allowances   data                 console log  allowance state  this state allowances                            render             const classes   useStyles            return                lt Paper className  classes root  gt                 lt Table className  classes table  gt                   lt TableHead gt                     lt TableRow gt                       lt TableCell gt Allow ID lt  TableCell gt                       lt TableCell align  right  gt Description lt  TableCell gt                       lt TableCell align  right  gt Allow Amount lt  TableCell gt                       lt TableCell align  right  gt AllowType lt  TableCell gt                      lt  TableRow gt                   lt  TableHead gt                   lt TableBody gt                     this state allowances map row   gt                         lt TableRow key  row id  gt                         lt TableCell component  th  scope  row  gt                           row AllowID                         lt  TableCell gt                         lt TableCell align  right  gt  row AllowDesc  lt  TableCell gt                         lt TableCell align  right  gt  row AllowAmt  lt  TableCell gt                         lt TableCell align  right  gt  row AllowType  lt  TableCell gt                                           lt  TableRow gt                                         lt  TableBody gt                 lt  Table gt               lt  Paper gt                    export default allowance

User · Answer

You can use  export default  by calling an Arrow Function that returns its React Component by passing it through the MaterialUI class object props  which in turn will be used within the Component render      class AllowanceClass extends Component              render             const classes   this props classes                       export default      gt        const classes   useStyles        return            lt AllowanceClass classes  classes    gt

User · Answer

happens also when you use a dependency without installing it  happen to me when i called MenuIcon from   material-ui icons   when was missing in the project

User · Answer

React linter assumes every method starting with use as hooks and hooks doesn t work inside classes  by renaming const useStyles into anything else that doesn t starts with use like const myStyles you are good to go   Update   makeStyles is hook api and you can t use that inside classes  you can use styled components API  see here

User · Answer

complementing the following comment For those who use redux  class AllowanceClass extends Component              render             const classes   this props classes                           const COMAllowanceClass    props    gt        const classes   useStyles        return   lt AllowanceClass classes  classes      props    gt        const mapStateToProps      InfoReducer      gt         token  InfoReducer token      user  InfoReducer user      error  InfoReducer error     export default connect mapStateToProps    actions    COMAllowanceClass

User · Answer

I had this issue when I used npm link to install my local library  which I ve built using cra  I found the answer here  Which literally says   This problem can also come up when you use npm link or an equivalent  In that case  your bundler might    see    two Reacts     one in application folder and one in your library folder  Assuming  myapp  and  mylib  are sibling folders  one possible fix is to run  npm link    myapp node modules react  from  mylib   This should make the library use the application   s React copy   Thus  running the command  npm link       libraries core decipher node modules react from my project folder has fixed the issue

User · Answer

Cause you Only Call Hooks from React Functions  See more here https   reactjs org docs hooks-rules html only-call-hooks-from-react-functions  Just convert Allowance class component to functional component  The demo working here https   codesandbox io s amazing-poitras-k2fuf  const Allowance        gt      const  allowances  setAllowances    useState         useEffect      gt        fetch  http   127 0 0 1 8000 allowances          then data   gt            return data json                    then data   gt            setAllowances data                   catch err   gt            console log 123123                          const classes   useStyles      return        lt Paper className  classes root  gt         lt Table className  classes table  gt           lt TableHead gt             lt TableRow gt               lt TableCell gt Allow ID lt  TableCell gt               lt TableCell align  right  gt Description lt  TableCell gt               lt TableCell align  right  gt Allow Amount lt  TableCell gt               lt TableCell align  right  gt AllowType lt  TableCell gt             lt  TableRow gt           lt  TableHead gt           lt TableBody gt             allowances map row   gt                 lt TableRow key  row id  gt                 lt TableCell component  th  scope  row  gt                   row AllowID                 lt  TableCell gt                 lt TableCell align  right  gt  row AllowDesc  lt  TableCell gt                 lt TableCell align  right  gt  row AllowAmt  lt  TableCell gt                 lt TableCell align  right  gt  row AllowType  lt  TableCell gt               lt  TableRow gt                         lt  TableBody gt         lt  Table gt       lt  Paper gt           export default Allowance

User · Answer

I have just started using hooks and I got the above warning when i was calling useEffect inside a function   Then I have to move the useEffect outside of the function as belows     const onChangeRetypePassword   async value   gt      await setRePassword value     previously useEffect was here         useEffect outside of func    useEffect      gt      if  password     rePassword      setPasswdMismatch true              else      setPasswdMismatch false          rePassword      Hope it will be helpful to someone

User · Answer

My case     SOLUTION in HOOKS const  cep  setCep    useState      const mounted   useRef false    useEffect      gt        if  mounted current            fetchAPI            else           mounted current   true              cep     const setParams     cep    gt        if  cep      cep    cep                   setCep  cep

User · Answer

If all the above doesn t work  especially if having big size dependency  like my case   both building and loading were taking a minimum of 15 seconds  so it seems the delay gave a false message  Invalid hook call   So what you can do is give some time to ensure the build is completed before testing

User · Answer

For me   the error was calling the function useState outside the function default exported

User · Answer

Different versions of react between my shared libraries seemed to be the problem  16 and 17   changed both to 16

User · Answer

In my case  I was trying to use mdbreact on windows  Though it installed  But i was getting the above error  I had to reinstall it and everything was ok  It happened to me once two with antd Library

User · Answer

Caught this error  found solution  For some reason  there were 2 onClick attributes on my tag  Be careful with using your or somebodies  custom components  maybe some of them already have onClick attribute

User · Answer

Yesterday  I shortened the code  just added  lt Provider store  store  gt   and still got this invalid hook call problem  This made me suddenly realized what mistake I did  I didn t install the react-redux software in that folder   I had installed this software in the other project folder  so I didn t realize this one also needed it  After installing it  the error is gone

User · Answer

You can convert class component to hooks but Material v4 has a withStyles HOC  https   material-ui com styles basics  higher-order-component-api Using this HOC you can keep your code unchanged

User · Answer

This error can also occur when you make the mistake of declaring useDispatch from react-redux the wrong way  when you go   const dispatch   useDispatch instead of  const dispatch   useDispatch     i e remember to add the parenthesis

[reactjs] Invalid hook call. Hooks can only be called inside of the body of a function component

Examples related to reactjs

Examples related to material-ui

Examples related to react-hooks