ReactJS hooks: update state inside condition

Question

everyone!

Can some one tell me if updating state inside if / else statement is acceptable by React rules. In particular updating state based on the result of a promise inside of the condition.

For example:

import {useState} from "react";
import {somePromiseOne, somePromiseTwo} from "./example";

function example(){

  const [state, setState] = useState();

  if(true){
    somePromiseTwo().then((result) => setState(result));
  }else{
    somePromiseOne().then((result) => setState(result));
  }

}

In your example, `state` and `setState` can be used in a nested function without problems. `useState(...)` should be called directly within the function, so your example is ok. — qrsngky, Jun 22 '22 at 10:56
Does your condition use the state ? If yes refer https://stackoverflow.com/questions/42038590/when-to-use-react-setstate-callback (most voted answer) — Nice Books, Jun 24 '22 at 08:35

score 1 · Answer 1 · answered Jun 22 '22 at 11:03

The Rules of hooks states that you must only call a hook at the top level, meaning you can’t call it inside a conditional branch. However, it is perfectly fine to call the setState function it inside a branch because it is not a hook itself, just a function to trigger a state update.

So it is fine to do A but not B

// A: Valid
function example(){
  const [state, setState] = useState();
  useEffect(() => {
    if(true){
      somePromiseTwo().then((result) => setState(result));
    }else{
      somePromiseOne().then((result) => setState(result));
    }
  }, […]);
}

// B: not valid

function example(){
  if(true){
    const [state, setState] = useState();
  }else{
   // …
  }
}

However, note that I put your async logic inside a useEffect hook. Why? Because your function can be called an arbitrary number of times by React, and you don’t want the async logic to trigger every time it is called. The idiomatic way to control when and how often it is called in a custom hook/component in React is by using useEffect. You can read more about it here

First, thanks for the in-depth answer. In my case the code will be used inside event handler so I dont need to use the useEffect hook. But the point you mеntion about how offten React can call some async logic is absolutly right. — Night, Jun 22 '22 at 11:59

score 0 · Answer 2 · answered Jun 22 '22 at 10:48

0

It is acceptable to use state inside condition. If you want to know what are rules of React hooks you can read about it here: https://reactjs.org/docs/hooks-rules.html

answered Jun 22 '22 at 10:48

CptSosen

160
1
13

score 0 · Answer 3 · answered Jun 22 '22 at 10:50

0

Yes why not :

const promiseFunc = isCondidtionValid ? somePromiseTwo : somePromiseOne;
promiseFunc().then(result => setState(result));

answered Jun 22 '22 at 10:50

Shadi Amr

494
3
9

score 0 · Answer 4 · answered Jun 22 '22 at 11:05

0

Yes, it is acceptable. For example:

Promise.resolve().then(() => {
  setState("newState");
});

would work just fine.

answered Jun 22 '22 at 11:05

Maksim Ilmast

11
3

ReactJS hooks: update state inside condition

4 Answers4