CODEWITHSUNDEEP
javascriptreactjsreact-native
Eduardo Breno
Eduardo Breno

Reputation: 123

What is the best approach to work with nested object in this.state?

I was reading the react documentation State Updates are Merged and theres a part it says when we set a object like this eg: this.setState({comments}) it completely replaces this.state.comments.

So, I wonder if the approach to change name of user object on event onChangeText is valid, because the whole object it'll be replaced everytime onChangeText is called.

Is that a good practice or have side effects like bad perfomance?

example code:

this.state = {
    user:{
        name: "",
        surname: "",
    },
    isLoading: false
};
/***/
onChangeText={name => this.setState({
  user: {
    ...user,
    name
  }
})}

Upvotes: 2

Views: 84

Answers (3)

lecstor
lecstor

Reputation: 5707

Your example is perfectly valid, provided the user variable is up-to-date. To ensure that, you might want to use the function arg form of setState. This will call your function with the current value of this.state and set state to the returned value.

onChangeText={
  name => 
    this.setState(
      ({ user }) => ({
        user: { ...user, name }
      })
    )
}

Upvotes: 0

Markus
Markus

Reputation: 1636

I'd recommend set from lodash/fp: https://gist.github.com/jfmengels/6b973b69c491375117dc#_setpath-value-object

Upvotes: 0

cutiko
cutiko

Reputation: 10537

Inmutability is one point performance is another.

Inmutability meas that you should not use the same reference to update an object but to replace with a new one. In React this is recommended because plenty of updates only happen if the object is new. You could create a problem if you re-use the user in the state, change the name and then update the state with it. And that is why it is a recommendation, in most cases React magic will work on others it can't tell the difference. So you would have to

const copy = Object.assign({}, this.state.user);

You can see this explanation here in the power of not mutating data

Performance in this case is concerning you because is a text listener, nevermind about it, React keeps track of the UI in a virtual DOM so it can update only what is different. This means everything will remain the same except for the new or deleted character.

You can try the clock example in the doc for that.

Upvotes: 1

Related Questions