Switching to immer.js for Immutability in React: Worth the Hype?
What Is Immutability?
Immutability offers a variety of benefits, including thread safety, simplicity in testing, and good encapsulation. Immutability offers more readable code, which is easier to maintain and less likely to contain errors.
The History of Immutability Libraries
As Shawn Wang notes in his article The Rise of Immer in React, immutability and React go way back to 2013, not long after React was open sourced. In 2015, Immutable.js came along and became the dominant immutability library. It retained this dominance until 2018, when immer.js was released. Immer quickly gained popularity, as it built on historical learning to offer improved solutions to standard problems. At its core, immer solves the same problem that Immutable does — but it solves them in a more streamlined way.
Making the Switch: From Immutable.js To Immer.js
I recently started using immer.js to handle immutability in React. This decision marked a departure from Praxent’s typical use of Immutable.js with React applications, which is a standard for many engineering teams.
To start, let’s take a high-level view of the problem that immutability libraries solve. After all, Redux is based upon the idea of not mutating state. If one is using Redux correctly, why do these libraries need to exist in the first place?
Principally, libraries like immer and Immutable exist to enforce immutability, which ensures that your data will be updated as you expect. Though Redux enshrines a read-only state that is updated with pure functions, it’s possible to mistakenly mutate the redux store. A direct mutation of the Redux store results in hard-to-debug side effects and other unintended behavior. As such, we can use some extra help to make sure that our state updates predictably.
The Decision Points
While making a major switch like this is never an easy decision, I decided to try immer.js for two main reasons.
The simple API: Immer’s API is easy-to-use, and I was able to grasp the core concepts by skimming the documentation a few times. The simple API was an appealing choice for writing Redux reducers.
Overall, immer.js has been excellent to work with. Writing Redux reducers and tests with it was a dream. The syntax provides a clear picture of inputs and outputs, and allows the developer to avoid doing a lot of destructuring and object creation. There were a few “gotchas” with immer that definitely took me by surprise, but they were workable.
While this feature was a little disappointing, it seems unlikely immer will make significant changes around classes. According to its author, adding class support would be in conflict with the architectural principle of an immutable state tree. For the time being, I’ll need to factor this into how I’m using OOP and classes in my React apps.
The Verdict: Immer.js For The Win
If you’d like to learn more about using immer, I recommend checking out this blog post.
Legacy software is an asset, but only if you know how to leverage it.
>> Download our free CodePath Assessment e-book for evaluating the health of legacy software assets so you can innovate risk-free.