does order of multiple setState() is respected in Reactjs?

user_13125787 0
Viewed 1642

as in my question if i have different setState() calls does their order will be respected while executing them ? i know setState() is asynchronous , so if setState() number [1] for example which is heavy (got updated from a heavy code calculations) does it will execute and gave the result before or after a light setState() number [2] (got updated from a light code) ? i meant does setState() [2] will wait until setstate() [1] is finished ?

setState({imgfile:imgf});//[1]
setState({title:tit});//[2]
reactjs javascript
3 Answers

If you want something to take action exactly after an update, you should use this.setState's callback. By passing a second parameter to this.setState you can guarantee that your function will be executed after updating title.

this.setState({
  title: 'My title'
}, () => {
  this.setState({
    dogName: 'Rocky'
  });
});
user_41150470

setState is asynchronous by design. When you call setState it isn't guaranteed to immediately update the state, it sends a request to update it. You don't want it synchronous and holding up the rendering of the UI if it's performing a complex change.

If you need to wait for your first setState to complete before doing something else then you can use a callback like so:

setState({imgfile:imgf}, () => 
{
   //do something
});

If your next operation is another state change then you should just batch them.

setState({imgfile:imgf, title: tit})
user_74661240

If I have different setState() calls does their order matter while executing them?

Basically, yes, it does. They are processed in the order in which they are queued up (and batched) during each render cycle.

Will setState()[2] wait until setstate()[1] has finished?

No, all state updates are batched and process during react's reconciliation cycle.

  1. In the case where each state update is independent, then the order in which they process doesn't really matter.
  2. Sometimes, however, state updates depend on the previous state value, (i.e. incrementing counters); these are where you want to use functional state updates so if more than one update is queued then each subsequent update uses the result of the previous update.
  3. In some other cases though, one state value may depend on another, different, state value.

Here's a codesandbox demo I use to help illustrate the second case.

For the third case there are a couple options. First is the class-based component's setState callback (functional components' useState hook does not have this), which is guaranteed to run after the state is updated. This, however, can lead to nesting issues. The second, and IMO, more correct way, is to use the component lifecycle functions (or hooks in functional components) to responded to specific state values updating and triggering other state updates to other state values.

user_86908570
Related