CODEWITHSUNDEEP
javascriptreactjs
fishamit
fishamit

Reputation: 267

Modifying state in React

I've read that it is not advisable to update state directly, e.g:

this.state.array = ['element'];

But, for example, consider this state:

this.state = {
    array: [],
}

updateArray = element => {
    temp = this.state.array;
    temp.push(element);
    this.setState({array: temp});
}

Isn't this essentialy the same as the first example? We are setting temp to point to this.state.array, thus mutating it and then overwriting it with this.setState().

I've seen this example in various tutorials, Wouldn't it be 'better' to make a copy of the array?

Upvotes: 1

Views: 93

Answers (2)

Matthew Zielke
Matthew Zielke

Reputation: 161

Check out the docs here, https://reactjs.org/docs/state-and-lifecycle.html.

According to the React team. Setting the state directly will not re-render a component. You must use setState.

As far as using a temp variable when setting state, that is used when something needs to be done to 'element' before setting the state variable. As setState can be called asynchronously. It is acceptable in your case to just do 

updateArray = (element) => {
  this.setState({ array: [ ...this.state.array, element ] });
}

Upvotes: 2

aks
aks

Reputation: 9491

Yes, you are right it's the same thing. You should read more about pass by value and pass by reference in JS.

When we say

let x = some.array

We are copying a reference(remember copy and paste as shortcut)? Both the things actually point to the same real thing and takes no extra space.

You should instead use some JS that can do this for you.

let x = some.array.slice()

This creates real copy of the array. On modern ES2015 you can do

let x = [...some.array]

a more elegent way.

Upvotes: 2

Related Questions