Immutable States in JavaScript: A Comparative Analysis of Immer.js and Structura.js
In the realm of modern software development, particularly in JavaScript and web development, immutable states have become a fundamental concept. Unlike mutable states, which can be changed or mutated, immutable states remain constant and unchangeable. This concept allows developers to write code that is more maintainable, predictable, and less prone to bugs.
The Challenge of Immutability in JavaScript
In JavaScript, creating a new variable using let signifies that the variable can be reassigned a new value, whereas creating a new variable using const signifies that the variable is constant and cannot be reassigned a new value, allowing for a sense of immutability. However, when objects are introduced into the mix, things become more complex. Even if a variable is created using const, if the variable is assigned with the value of an object, you can still reassign new values to the properties of the object, contradicting the concept of immutability.
Enter Immer.js and Structura.js
To address this challenge, libraries like Immer.js and Structura.js have been developed to provide powerful tools for working with immutability in JavaScript programs. In this article, we will delve into the features, advantages, and disadvantages of these two libraries.
Immer.js: A Popular Choice for Immutable States
Immer.js is one of the most popular libraries on npm, with nearly 10 million downloads a week, and is considered an industry standard for using immutable states in JavaScript. At its core, Immer.js allows you to work with immutable data structures by creating a draft state that you can modify as if it were mutable. The library then creates a new immutable state based on your modifications to the draft state.
Immer.js provides a draft API that allows you to modify the state as if it were mutable, making working with immutable state incredibly convenient. Additionally, Immer.js detects accidental mutations and throws an error. It also supports built-in JavaScript data types, like objects, arrays, sets, and maps, and shares as much data as possible between the base state and draft state, improving performance and reducing memory usage.
Advantages of Immer.js
Immer.js comes with an impeccable developer experience, making handling immutable data structures incredibly simple and efficient. The learning curve for Immer.js is very shallow, and it has a large developer community, ensuring that there are resources available to help with any issues that may arise.
Disadvantages of Immer.js
The main disadvantage of Immer.js is that it is not highly performant, especially when working with large objects. Under the hood, Immer.js uses Object.freeze during runtime to make the object read-only, which leads to performance issues. Nested objects take an especially large performance hit because Object.freeze needs to be run at each level of the object.
Structura.js: A Performant Alternative
Structura.js is a relatively new library designed to be nearly identical to Immer.js in terms of usability but is much more performant. Structura.js freezes objects at compile time with TypeScript using custom types, reducing the performance cost of making an object immutable to zero.
Advantages of Structura.js
The main advantage of using Structura.js is its performance benefits. It’s lightning-fast compared to libraries like Immer.js, which handle freezing during runtime. Structura.js also handles some edge cases other libraries struggle with, like circular references.
Disadvantages of Structura.js
The developer community around Structura.js is very small, and the library is still in alpha. This means it is less mature and stable than established libraries like Immer.js. Because of the library’s small community and underdeveloped documentation, there may be some trial and error when using the library.
Working with Structura.js
To use Structura.js, you need to include the library in your project. You can download the library from the official GitHub releases page or install it using a package manager like npm or Yarn.
Structura.js provides the produce function that allows you to create and modify immutable data structures. You can also use the produceWithPatches function to gain access to the new state, as well as the patches and inverse patches, allowing for undo/redo functionality.
Conclusion
In conclusion, if performance is of utmost importance for your application, consider using Structura.js. However, if you need a production-ready library with a large community, consider using Immer.js. Both libraries provide powerful tools for working with immutability in JavaScript programs, and the choice ultimately depends on your specific needs and requirements.