2

I was working with React JS and I was wondering the difference between calling setState() twice to set two different state variables like this:

this.setState({fruit1: “apple”});
this.setState({fruit2: “mango”});

AND

calling setState() once and passing both state variables as JSON like this:

this.setState({fruit1: “apple”, fruit2: “mango”});

Also what is the better practice: putting state variable names in double quotes like this: this.setState({"fruit1": “apple”}) or simply ignoring the quotes?

maxx777
  • 1,320
  • 1
  • 20
  • 37

3 Answers3

4

From React documentation:

NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable. setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains. setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate(). If mutable objects are being used and the logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.

So, use this.setState({fruit1: “apple”, fruit2: “mango”});

For the second question you can look here and here

Community
  • 1
  • 1
gabrielgiussi
  • 9,245
  • 7
  • 41
  • 71
3

Inside a React event handler (that is, a function called from a React-based onChange={...} property and the like), multiple calls to setState are batched and the component is only re-rendered a single time. So, there's no difference between

handleClick: function() {
  this.setState({fruit1: "apple"});
  this.setState({fruit2: "mango"});
}

and

handleClick: function() {
  this.setState({fruit1: "apple", fruit2: "mango"});
}

However, outside of the React event system, the two calls to setState will not be merged unless you wrap them in a function passed to React.addons.batchedUpdates. This is normally not something you have to worry about, but may become an issue if you start setting state in response to asynchronous events (e.g. timers, promises, callbacks, etc). For that reason, I would generally recommend the second form (with the two objects merged into one) over the first.

Michelle Tilley
  • 157,729
  • 40
  • 374
  • 311
  • That's not true... Multiple calls to setState will call componentWillReceiveProps multiple times... while this this.setState({fruit1: "apple", fruit2: "mango"}); only call one time. – metRo_ Mar 06 '18 at 17:31
  • 1
    @metRo_ `setState` won't call `componentWillReceiveProps` at all; that method is called when *child* components receive new props. Here's an example to show that multiple `setState` calls only trigger `componentWillReceiveProps` once in a child *if* they're called inside an event handler: https://jsfiddle.net/02mb5uec/6/ – Michelle Tilley Mar 07 '18 at 23:41
0

Here is a detailed explanation of React States and setState() method.

States (and props) are only two reasons why React re-renders/recalculate the DOM. It means if we change State, we are telling react to change the related behaviour of our app.

State is a Java-Script object with key:value pair. Now we may have many States (many key:value pairs) and let's say at certain point only one state is changing. in that case we may use this.setState() method to change only that specific state.

state = { fruit1: 'mango', fruit2: 'apple' }

let's say we want to update fruit1: 'watermelon'.

Here we can say: 

this.setState( {fruit1: 'watermelon'} );

Here, we did not say anything about second state (fruit2), so react will merge changed state (fruit1) with old state (fruit2).

While, we can also say:

this.setState( {fruit1: 'watermelon' ,fruit2:'apple'} );

But it is not necessary.

Correct and Re-commanded way of setting/changing State:

From React Official docs:

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

So here is a better way to do it: If we are updating the counter or calculating something:

this.setState((prevState,props) => {
 return {
           { counter: prevState.counter+1; }
        }
Avinash Pawar
  • 1
  • 2