Poor Man’s Immutable

In ReactJS, the main idea is having a virtual DOM, that is only reconciled with actual DOM when need be. In addition to that, there’s a shouldComponentUpdate() method, that is called before re-rendering a component and allows the developer to cancel the render by returning false, if the logic says that the component should not be touched. This method implementation should be written to be fairly quick, because it will be called often. By default, this method returns true.

There is also a PureRenderMixin, which basically compares the current and next properties and state and returns true only if one of them is changed.
Your implementation can be different, but most often it’ll be based on comparison; either of props, or state objects, or both, as the mixin does.

And this is where the productivity might suffer. Usually when you have objects or arrays (which too are objects), which happens quite often.
In JS, object equality is determined by a reference equality. That is, if you set a property on an object, it will be equal to the previous version, because the reference is the same. To avoid this, you would have to create a new deep copy of the object, and set the property on it. Then compare the objects with “===“.

This, however, doesn’t scale, and it is costly. Which is why Facebook recommends using their Immutable.js library, which allows to manage immutable objects that return a new object once the previous had been changed in any way. They also allow quick comparison with equals() and hashCode(), should you prefer to use value comparison instead of comparing references.

But as it always happens in software development, it might be that you don’t want a whole new library (though it is about 56Kb minimised, which is not likely to add much to your app, but suppose you are a Scrooge when it comes to app size). In a sense, we might call it a “Poor Man’s Immutable”, but in reality it has pretty extensive syntax, too. It is ReactJS Immutability Helpers. Basically, it is just one method: React.addons.update(myData, <updater>).

How does it work?

Well, actually, same as Immutable.js: every time you update the model, a new object is returned.

How does it look?
Well, if you have some acquaintance with MongoDB, the update operation syntax looks somewhat familiar:

let updated = React.addons.update(data, {
  document: {title: {subtitle: {$set: "new subtitle"}}},
  content: {items: {$push: {id: 123, text: "I am a new content item"}}}

Actually, this syntax is based on MongoDB query syntax; that is why it looks familiar. Other operations it allows are:

  • {$unshift: array} prepend all the items in array to the target.
  • {$splice: array of arrays} for each item in arrays call splice() on the target with the parameters provided by the item.
  • {$merge: object} merge the keys of object with the target.
  • {$apply: function} passes in the current value to the function and updates it with the new returned value.

For more info, this is the page that describes ReactJS Immutability Helpers in more detail.


About Maryna Cherniavska

I have productively spent 10+ years in IT industry, designing, developing, building and deploying desktop and web applications, designing database structures and otherwise proving that females have a place among software developers. And this is a good place.
This entry was posted in javascript and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s