0

What are the advantages of using immutable libraries like immer.js or immutable.js? What is the difference between making changes to a draft of an object or making changes to a duplicate of the object?

Are there any performance differences (And why?) between the blocks of code below?

Edit: Changed the console.log order and the use the spread operator in the second block of code in response to vanowm comment.

const { produce } = require("immer");

let numArray = [1,2,3];

const nextState = produce(numArray, (draft) => {
  draft.push(4);
});

console.log(nextState); // [ 1, 2, 3, 4 ]
console.log(numArray); // [ 1, 2, 3 ]

let numArray = [1,2,3];

const nextState = ((array) => {
  let newArray = [...array]
  newArray.push(4);
  return newArray;
});

console.log(nextState(numArray)); // [ 1, 2, 3, 4 ]
console.log(numArray); // [ 1, 2, 3 ]
A. J. Green
  • 93
  • 2
  • 8
  • 1
    Take a good read to this article https://dev.to/glebec/four-ways-to-immutability-in-javascript-3b3l, may answer your questions. Anyways, afaik, no, those two snippets don't have a performance difference. – Luka Cerrutti Apr 17 '22 at 20:29
  • 1
    Change positions of your `console.log` lines in both examples and you'll see the difference: the second example the original array is changed, while in first example it remains unchanged. – vanowm Apr 17 '22 at 20:34
  • It's stated pretty clearly in the first paragraph of the [docs](https://immerjs.github.io/immer/) ***'Immutable data structures allow for (efficient) change detection: if the reference to an object didn't change, the object itself did not change.'*** As @vanown noted the second example maintains a single reference to an array but mutates it so simply comparing array references is not enough to know if the array has been changed. – pilchard Apr 17 '22 at 20:34
  • @vanowm Thanks. I changed the second block of code to reassign the original array before changing it. – A. J. Green Apr 17 '22 at 20:42
  • 3
    also see: [Does immutability hurt performance in JavaScript?](https://softwareengineering.stackexchange.com/questions/304574/does-immutability-hurt-performance-in-javascript) (in fact the depth of discussion on that question probably makes it a duplicate for the breadth of your question) – pilchard Apr 17 '22 at 20:46
  • Thank you for all the answers/links. I guess right now I'm wondering if the existing immutable libraries are doing anything different under the hood than my second code example. Immer.js was very useful on a project I worked on but mainly due to the patches it generated for undoing and redoing changes to the state. I am a little unclear about what else is happening. – A. J. Green Apr 17 '22 at 21:33
  • I can also see the use of immer.js for deeply nested objects. But if I had to do without it, I would write a function that would recursively duplicate an object and all it's nested properties prior to making any changes to it. Is this what the "draft" in immer is? I'm still reading to the links that were shared. So the answer to this might be there. – A. J. Green Apr 17 '22 at 21:36
  • 1
    @A.J.Green Libraries like immutable.js do things differently than your second example (see introduction on https://immutable-js.com ). You essentially copy data, which doubles memory usage and isn't particularly fast. This can be optimized by using [hash maps tries](https://en.wikipedia.org/wiki/Hash_array_mapped_trie) and [vector tries](https://hypirion.com/musings/understanding-persistent-vector-pt-1). – dube May 11 '22 at 07:16

0 Answers0