JavaScript by Example

Immutable state

An immutable object is an object that cannot be changed once it is set! Yup, that's right. Once you create that object, there is no going back. That gets you wondering "What if I need to modify a property of that object?" Well, it's simple; you simply create a new object from the old object but with the new property this time.

Now, that may seem like a lot of work, but trust me, it is actually better to create a new object. Because, most of the time, React simply needs to know if the object is changed to update the view. For example:

this.state = { a: 'Tree', b: 'Flower', c: 'Fruit' };this.state.a = 'Plant';

This is a standard way of changing the property of a JavaScript object. Here, let's call it the mutable way. Great! ...