Better/faster way for changing React array state than cloning it?

Question

Whenever a React class has a state object that is or contains an array, updating that state feels awkward. Usually what I do is

var newArrayThing = _.clone(this.state.arrayThing); //or slice()
newArrayThing[123] = 42; //update stuff
this.setState({arrayThing: newArrayThing});

Is there a better or more elegant way of handling this I am missing? Especially since I always feel this is unnecessary slow if the array is big and the change is small. All that copying for a simple change. But the state should not be edited directly seems to be the mantra.

The Facebook docs mention the Immutability Helpers, but they seem even more far fetched than this.

tirdadc · Accepted Answer · 2015-06-17 14:13:21Z

5

That is a very idiomatic way to do it but if you have concerns over cloning large arrays, you should definitely look into the update helper that you mentioned, it's not really that bad:

this.setState({
  arrayThing: React.addons.update(this.state.arrayThing, {123: {$set: 42}})
})

edited Jun 17, 2015 at 14:13

answered Jun 17, 2015 at 12:39

tirdadc

4,7133 gold badges40 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Better/faster way for changing React array state than cloning it?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related