CODEWITHSUNDEEP
javascriptreactjsreact-hooks
max23701
max23701

Reputation: 279

Does calling setter of useState hook inside if statement imply BREAKING RULES OF HOOKS?

React docs state: don’t call Hooks inside loops, conditions, or nested functions.

Does calling a hook means just calling useState e.g. const [state, useState] = useState(0)?

What about calling setter in conditionals ?

Is this code breaking rules of hooks ?

const [oneHook, setOneHook] = useState(0)
const [anotherHook, setAnotherHook] = useState(false)

if (something) {
   setOneHook(1)
   setAnotherHook(true)
} else {
     setOneHook(0);
     setAnotherHook(false)
}

Thanks !

Upvotes: 6

Views: 3609

Answers (2)

Guruprasad
Guruprasad

Reputation: 783

React docs state: don’t call Hooks inside loops, conditions, or nested functions.

Alright,the following code shows the example for the above statement. I had the same issue where i needed to set the state inside of a loop, like following

const [someArray, setArray] = useState([]);

someValue.forEach((value, index) => {
     setArray([...someArray, value]) //this should be avoided
    });

Above thing i have achieved like this following

var temp = [];
var counter = 0;
someValue.forEach((value, index) => {
    temp.push(value);
    counter++;
     if (counter === someValue.length) {
          setArray(temp)
       }
    });

if you are setting a state inside the loop than each time the component re renders which you do not want to get into.

Is this code breaking rules of hooks

No Your code looks fine, as you are setting up the state only based on condition for only once when the component renders

Upvotes: 0

Nicholas Tower
Nicholas Tower

Reputation: 84912

No, that code example does not break the rules of hooks. Every time the component renders there will be exactly the same number of calls to useState in exactly the same order, so that will be fine.

I do want to point out that setting state right away in the body of the component doesn't make much sense. When the component mounts it will start rendering with the initial values from state, but then before it can finish rendering the state has already changed and it has to start over. But presumably that's just an artifact of the example, and in your real code the if would be inside a useEffect or some other practical code location.

Upvotes: 4

Related Questions