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

I am trying to use useEffect in the if condition but I am facing the following error: Uncaught Invariant Violation: Rendered more hooks than during the previous render in Reactjs. In this Exerror article, We are going to learn about How to reproduce this error and we will discuss All Possible Solutions Let’s Get Started with This Article.

How Uncaught Invariant Violation: Rendered more hooks than during the previous render Error Occurs?

I am trying to use useEffect in the if condition but I am facing the following error.

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

Here is my code

import {useState} from 'react';

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

  if (votes > 0) {
    useEffect(() => {
      console.log('Up Vote Is Bigger Than 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 Uncaught Invariant Violation: Rendered more hooks than during the previous render Error?

Solution 1: Move Condition into useEffect

We Cannot run UseEffect Conditionally And that’s Why This error Occurs. You Just have to Move Your Condition into useEffect and then Your error will be resolved. Just like Below Code.

import {useState} from 'react';

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

 useEffect(() => {
     if (votes > 0) {
         console.log('Up Vote Is Bigger Than 0');
     }
 });

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

Here in Above Code, I Was Using useEffect in the if Condition and that is Causing this error So I Just Moved my If Condition in the useEffect, and Then My Error was resolved.

Solution 2: React Hook Calling Rule

Here are some Rules for calling hooks.

• Don’t call Hooks inside loops, conditions, or nested functions
• Only Call Hooks from React Functions
• Call Hooks from React function components.
• Call Hooks from custom Hooks

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

• Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
• 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