Benchmark: Immer vs shallow copy + immutable+myimmer

HTML Preparation code:

<script src="https://unpkg.com/immer@9.0.16/dist/immer.umd.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>

Script Preparation code:

var data = { items: {}, count: 0, keys: [] }

for (let index = 0; index < 100; index++) {
  data[index] = { id: index, name: `ITEM-${index}`, value: Math.random() }
  data.count++
  data.keys.push(index)
}

var NEW_ITEM_ID = data.count +1

const isObject = (v) => v && typeof v === 'object';
const createNode = (key) => ({ key, next: null });
const shadowAssign = (obj, { key, next }) => {
  const targe = obj[key]
  if (isObject(targe)) {
    obj[key] = Array.isArray(targe) ? targe.slice() : Object.assign({}, targe);

    if (next) {
      for (const n of Object.values(next)) {
        shadowAssign(obj[key], n)
      }
    }
  }
}

var produce2 = (baseState, reducer) => {
  let rootNode;
  const addModifyPath = (path = '') => {
    rootNode = rootNode || createNode('');
    const keyArr = path.split('.');
    let curNode = rootNode;

    for (let i = 1; i < keyArr.length; i++) {
      const key = keyArr[i]
      const childMap = curNode.next = curNode.next || Object.create(null);
      const childNode = childMap[key] = childMap[key] || createNode(key);
      curNode = childNode;
    }
  }

  const _Metadata_ = new WeakMap();
  const proxyHandler = {
    deleteProperty: function (target, property) {
      addModifyPath(_Metadata_.get(target));
      return Reflect.deleteProperty(target, property);
    },
    get: function (target, property, receiver) {
      if (property === '$') {
        return target;
      }
      if (!_Metadata_.has(target)) {
        _Metadata_.set(target, '');
      }
      const result = Reflect.get(target, property, receiver);
      if (isObject(result)) {
        _Metadata_.set(result, _Metadata_.get(target) + '.' + property);
        return deepProxy(result);
      }
      return result;
    },
    has: (target, property) => Reflect.has(target, property),
    ownKeys: (target) => Reflect.ownKeys(target),
    set: function (target, property, value, receiver) {
      addModifyPath(_Metadata_.get(target) + '.' + property);
      return Reflect.set(target, property, value, receiver);
    },
  };

  const deepProxy = (obj) => new Proxy(obj, proxyHandler);
  const draft = deepProxy(baseState);

  reducer(draft);

  const result = { '': baseState };
  if (rootNode) {
    shadowAssign(result, rootNode);
  }

  return result[''];
};

var produce = immer.default
var datai = { items: Immutable.Map(data.items), count: data.count, keys: Immutable.List(data.keys) }

Tests:

immer
data = produce(data, draft => { draft.items[NEW_ITEM_ID] = { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 } draft.counter++ draft.keys.push(NEW_ITEM_ID) })
shallow copy
data = { ...data, items: { ...data.items, [NEW_ITEM_ID]: { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 } }, count: data.count +1, keys: [ ...data.keys, NEW_ITEM_ID] }
immutable
data = { ...data, items: data.items.set(NEW_ITEM_ID, { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 }), count: data.count + 1, keys: data.items.push(NEW_ITEM_ID) }
my-immer
data = produce2(data, draft => { draft.items[NEW_ITEM_ID] = { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 } draft.counter++ draft.keys.push(NEW_ITEM_ID) })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immer
shallow copy
immutable
my-immer

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance of three different approaches to modify and manipulate an object in JavaScript:

1. **Immer**: A library that provides a simple, intuitive way to update complex data structures by creating a copy of the original object and then modifying the copy.
2. **Shallow copy + immutable**: A combination of manually creating a shallow copy of the original object using the spread operator (`{...data}`) and making modifications to the copied object in an immutable way (i.e., not modifying the original object directly).
3. **Immutable**: Using Immutable.js, a library that provides immutable data structures, such as maps and lists.

**Options compared**

The three options are being compared in terms of their performance, measured by the number of executions per second.

**Performance characteristics**

Here's a brief summary of each option:

* **Immer**:
	+ Pros: Easy to use, intuitive API, good performance.
	+ Cons: May not be suitable for very large data structures due to the overhead of creating a copy.
* **Shallow copy + immutable**: 
	+ Pros: Can handle large data structures, provides some level of immutability.
	+ Cons: Requires manual effort to create and manage the copied object, may lead to errors if not done correctly.
* **Immutable**:
	+ Pros: Provides strong guarantees about the immutability of data structures, can be more efficient than other options for large datasets.
	+ Cons: May require additional setup and learning curve due to the use of a separate library.

**Benchmark results**

The latest benchmark results show that:

* The "shallow copy" option has the highest number of executions per second (11328.69), followed by "Immer" (5908.39), and then "Immutable" (0.00). This suggests that the shallow copy + immutable approach is the fastest, likely due to its ability to handle large data structures more efficiently.

Overall, the test highlights the trade-offs between ease of use, performance, and immutability when working with complex data structures in JavaScript.

Related benchmarks:

Immer vs shallow copy + immutable+myimmer (version: 0)

Comparing performance of: immer vs shallow copy vs immutable vs my-immer

Created: 3 years ago by: Registered User

Jump to the latest result

immer

shallow copy

immutable

my-immer

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):