close

[Solved] Uncaught Invariant Violation: Rendered more hooks than during the previous render

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error Uncaught Invariant Violation: Rendered more hooks than during the previous render 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 To Solve Uncaught Invariant Violation: Rendered more hooks than during the previous render Error ?

  1. How To Solve Uncaught Invariant Violation: Rendered more hooks than during the previous render Error?

    To Solve Uncaught Invariant Violation: Rendered more hooks than during the previous render Error You can simply change your onlick event add () => before setAllResultsVisible and it will work perfectly.

  2. Uncaught Invariant Violation: Rendered more hooks than during the previous render

    To Solve Uncaught Invariant Violation: Rendered more hooks than during the previous render Error You can simply change your onlick event add () => before setAllResultsVisible and it will work perfectly.

Solution 1

The fix works because the first code sample (the erroring one) invokes a function inside onClick, while the second (the working one) passes a function to onClick. The difference is those all-important parentheses, which in JavaScript mean ‘invoke this code’.

Think of it this way: in the first code sample, every time component is rendered, renderResults is invoked. Every time that happens, setAllResultsVisible(!allResultsVisible), rather than waiting for a click, is called. Since React performs the render on its own schedule, there’s no telling how many times that will happen.

Solution 2

You can simply change your onlick event add () => before setAllResultsVisible

<p onClick={() => setAllResultsVisible(!allResultsVisible) }> 
    More results v
</p>

and it will work perfectly

Solution 3

Even after the fixes above, there are a few other causes as well for this error. I am writing below one use case which occurred for me.

function Comp(props){return <div>{props.val}</div>}

This component can be called in the following ways in jsx:

1. <Comp val={3} /> // works well
2. { Comp({val:3}) } // throws uncaught invariant violation error, at least it throw in my case, may be there were other factors, but changing back to first way removed that problem

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