close

[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?

  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 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. 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.

  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 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. 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 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

Leave a Comment