Simplify Immutable Data Structures in JavaScript with Immer.js

Introduction

It can be difficult to maintain immutability with JavaScript, especially when working with intricate data structures. However, leveraging immutable data structures can simplify code complexity and enhance performance by preventing unintended modifications to data.

Although JavaScript offers certain built-in features for immutability, the procedure of constructing and modifying immutable objects can quickly become tedious and prone to mistakes. However, with Immer.js a lightweight and easy-to-use library, developers can simplify the process of creating and updating immutable data structures in JavaScript.

In this blog post, we will explore how Immer.js works and how it can simplify creating and updating immutable data structures in JavaScript. We will also cover the advantages of using Immer.js, provide examples, and highlight some common use cases. If you're a developer looking to streamline your code and ensure data consistency, Immer.js might just be the tool you need.

Prerequisites

Immer.js is a JavaScript library designed for working with immutable data structures. To use Immer.js, it's important to have a basic understanding of JavaScript and its syntax. Additionally, you should keep in mind the following prerequisites:

• Familiarity with ES6 syntax

• Knowledge of immutable data structures

Get Started

To get started with Immer.js, you first need to install it using npm or yarn:

• NPM: npm install immer

• Yarn: yarn add immer

Using CDN link:

• Unpkg: <script src="https://unpkg.com/immer"></script>

• JSDelivr: <script src="https://cdn.jsdelivr.net/npm/immer"></script>

Once you have included Immer.js, you can then use it to create immutable objects by calling the produce function. The produce function takes two arguments: the original object and a function that modifies the object. Then, after the function returns the modified object, Immer.js will use it to create a new, immutable version of the object.

For example, let's say you have an object called "cars" that contains a name and a productionYear:

without Immer.js:

const car1 = { name: "Benz", productionYear: 1966 };
const car2 = { name: "Lexus", productionYear: 1973 };
const car3 = { name: "Kia", productionYear: 2000 };
const newCar = [car1, car2, car3].map((car) => ({
  ...car,
  productionYear:
    car.name === "Benz" ? 1965 : car.name === "Lexus" ? 1974 : 1999,
}));

console.log(newCar);

In this code, there are three car objects: car1, car2, and car3. These objects contain properties such as name and productionYear that describe each car. The newCar variable uses the map() method to create a new array based on the original array of cars. For each car object in the original array, the map() method creates a new object with the spread syntax (...car) to copy all the properties of the original object.

With Immer.js:

import produce from "immer";

const car1 = { name: "Benz", productionYear: 1966 };
const car2 = { name: "Lexus", productionYear: 1973 };
const car3 = { name: "Kia", productionYear: 2000 };
const newCar = produce([car1, car2, car3], (draft) => {
  draft[0].productionYear = 1965;
  draft[1].productionYear = 1974;
  draft[2].productionYear = 1999;
});

console.log(newCar);

This code imports the produce function from the immer library. The produce function is used for creating immutable state by allowing developers to work with a draft version of the state, apply changes to the draft, and then automatically generate an updated immutable state.

In this code, three objects car1, car2, and car3 are defined with two properties: name and productionYear. These objects are then passed as an array to the produce function along with a callback function that modifies the production year property of each car in the draft array.

The callback function uses the draft parameter to modify the production year property of each car in the draft array. Finally, the produce function generates a new immutable state with the updated properties, which is stored in the newCar variable.

Conclusion

In conclusion, immer.js is a useful and powerful library for developers who work with immutable data structures in JavaScript. Its API is intuitive and user-friendly, enabling developers to write cleaner and more concise code that is easy to understand. With immer.js, developers can create immutable copies of complex data structures and make changes to them without worrying about unintended mutations. Additionally, immer.js provides advanced features such as automatic freezing, deep cloning, and structural sharing, which can enhance performance in high-traffic applications. Whether you are working on a small personal project or a large-scale enterprise application, immer.js can help you write better code with fewer errors and less complexity.

Credits

• Immer Doc