Immutable objects in JavaScript made really simple with immer!

This short text is a continuation of an article being introduction to immutable objects in Javascript: Why the concept of immutability is so awfully important for a beginner front-end developer?

Last time, we’ve learned that using spread operator for creating immutable objects is pretty neat — at least, way better than Object.assign. Still, code full of spread operators ay become slightly harder to read when dealing with deeper structure, e.g.:

Now, imagine that our structure would get deeper and deeper. We’re left without much choice — to do it properly using immutable principles, we have to perform some acrobatics using ... operator, both in objects and array. The deeper the structure gets, the less readable our code gets. Is there any method to improve it?

Meet immer — a library that allows you to work with immutable structures just like you would do it using familiar, classic mutable approach. It uses a single function imported from the npm package. First, you need to fetch immer package from the npm repository:

npm install immer

Then, you can import it to your application:

import produce from 'immer';

We’ve imported the package into produce function — this name should be more intuitive, and in a while you’ll see why.

This library allows creating a new immutable object just by mutating previous one — the trick here is that the change must happen inside special function. We’ll start with example of changing John’s name to Andrew — just like earlier. Behold the magic:

We got the same final result as before, but this time we achieved it using less lines of code. How did it happen?

As you can see in the code above, immer‘s produce function is being fed by our initial object — then by using special callback in the second parameter we provide the body of mutating function. The magic here is that we can be 100% sure that our originalinputObject will remain untouched: immer recreates only the entities that need to be recreated — and by leveraging proxy API under the hood, it does it blazingly fast. We can do the double-check to be sure:

As you can see, the predictions were correct. No matter how many modifications we want to perform, as long as they will be inside the produce’s callback — we can be sure that immer will calculate everything for us and return brand new object structure. It will always follow the same flow:

Behind the scenes, immer compares the draft object and the original object, calculates differences and re-creates the whole structure just like we would do manually. Yup, it’s very convenient.

Drawbacks? Virtually none, as long as you’re basing on a premise that vast majority of your application’s users use browsers that support proxy API (which is standard by now). immer leverages it in order to transform objects fast, but it also can fallback to more basic mechanisms if proxy is not available — but in this case, you can’t expect top performance.

Bottom-line? I strongly recommend using immer when developing using immutable manner, especially in larger applications.

If you’re still not “feeling” the subject, you can start from the beginning and learn how to write immutable code in JavaScript from scratch.

Also, if you’re interested in another important topic related to JavaScript development, check out my other article in the series: Why the concept of immutability is so awfully important for a beginner front-end developer?

Thanks for reading and keep in touch!