[Solved] Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop

Hello Guys. Today in ReactJS. In this Exerror article, We are going to learn about How to reproduce this error and we will discuss All Possible Solutions Lets Get Start with This Article.

How Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop Occurs?

I am trying to use onClick to increase the vote Functionality But Somehow I am facing the following error.

Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop

Here is my code.

import {useState} from 'react';

export default function App() {
  const [votes, setVotes] = useState(0);

  return (
    <div>
      <button onClick={setVotes(votes + 1)}>Vote Up</button>
      <h1>UpVotes: {votes}</h1>
    </div>
  );
}

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop?

Solution 1: Use a function in the Onclick event

Probably this error Usually Occurs whenever we are trying to direct the function from onclick event handler. We have to pass the function in onclick and then our error will be resolved.

For Example, In My Case, I am Direct calling setVotes onclick And That is Causing this error. So I have to pass the function in onclick event handler Just like below.

      <button onClick={() => setVotes(votes+ 1)}>Vote Up</button>

And Now, Your error will be resolved. Thank You.

Conclusion

It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• Failed to load config “react-app” to extend from
• How to Set port in next.js
• npm ERR! code ENOENT npm ERR! syscall open
• How to update all dependencies in package.json to the latest version
• ReferenceError: document is not defined in Nextjs