close

[Solved] Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks in reactjs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks Error Occurs?

I am facing following error.

Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
    at invariant (react-dom.development.js:55)
    at finishHooks (react-dom.development.js:11581)
    at updateFunctionComponent (react-dom.development.js:14262)
    at beginWork (react-dom.development.js:15103)
    at performUnitOfWork (react-dom.development.js:17817)
    at workLoop (react-dom.development.js:17857)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at replayUnitOfWork (react-dom.development.js:17113)
    at renderRoot (react-dom.development.js:17957)
    at performWorkOnRoot (react-dom.development.js:18808)
    at performWork (react-dom.development.js:18716)
    at flushInteractiveUpdates$1 (react-dom.development.js:18987)
    at batchedUpdates (react-dom.development.js:2210)
    at dispatchEvent (react-dom.development.js:4946)
    at interactiveUpdates$1 (react-dom.development.js:18974)
    at interactiveUpdates (react-dom.development.js:2217)
    at dispatchInteractiveEvent (react-dom.development.js:4923)

How To Solve Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks Error?

  1. How To Solve Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks Error?

    To Solve Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks Error Make sure that you didn't run useEffect conditionally. For example, if you have some code like the following.

  2. Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks

    To Solve Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks Error Make sure that you didn't run useEffect conditionally. For example, if you have some code like the following.

Solution 1

Make sure that you didn’t run useEffect conditionally.

For example, if you have some code like the following:

if(condition) {
  useEffect(()=>{
    doSomething();
  }, []);
}

Then change it to

useEffect(()=>{
  if(condition) {
    doSomething();
  }
}, []);

Then the error would not happen.

Solution 2

I have resolved this issue by changing the order of React Hooks. So I have changed the code from

function(){

const [loading ,setLoading] = React.useState(false);

if(loading){
return "loading ....."
}

useEffect(()=>{
  if(condition) {
    doSomething();
  }
}, []);

return <div>component</div>
}

to

function(){

const [loading ,setLoading] = React.useState(false);


useEffect(()=>{
  if(condition) {
    doSomething();
  }
}, []);


if(loading){
return "loading ....."
}
return <div>component</div>
}

So, when loading becomes true then useEffect will not run and that will throw an error..but if I declare loading JSX element after useEffect then it will work perfectly.

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read

Leave a Comment